三天看懂Webpack-02这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战实现webpack的实时重新加载

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

实现webpack的实时重新加载(live reloading)

由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
运行cnpm i webpack-dev-server --save-dev安装到开发依赖
安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包（npm run dev），但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中
打包失败时：
1. webpack 4+ 版本，你还需要安装 CLI cnpm install --save-dev webpack-cli
2. 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
3. 对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack：

把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快.
生成的文件是在服务器根目录下
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

 "dev": "webpack-dev-server --contentBase src"

 webpack.config.js
 devServer:{
    contentBase:'./src'
  }

同时修改index页面中script的src属性为<script src="bundle.js"></script>

// 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能 // 3. 由于，我们是在项目中，本地安装的 webpack-dev-server ，所以，无法把它当作脚本命令，在powershell 终端中直接运行；（只有那些安装到全局 -g 的工具，才能在终端中正常执行） // 4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack // 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的 bundle.js; // 6. 我们可以认为， webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是，可以认为，和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js

使用clean-webpack-plugin

使用clean-webpack-plugin 在打包之前做清空dist的操作

npm install clean-webpack-plugin --save-dev

webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// 配置插件
  plugins:[
    // 在打包之前做清空dist的操作
    new CleanWebpackPlugin()
  ]

实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！

方式1：

修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 3003 --open"

方式2：

修改webpack.config.js文件，新增devServer节点如下：

devServer:{
        hot:true,
        open:true,
        port:3003
    }

在头部引入webpack模块：【webpack4以后不需要使用热更新插件】

var webpack = require('webpack');

在plugins节点下新增：

new webpack.HotModuleReplacementPlugin()

使用`html-webpack-plugin`插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：

    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

修改package.json中script节点中的dev指令如下：

"dev": "webpack-dev-server"

将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

三天看懂Webpack-02