使用插件自动打包

我们知道，使用npx webpack --watch 可以监听文件的改变，自动的帮我们打包，我们为了查看页面的效果，需要我们找到打包后生成的文件，然后再浏览器中运行该文件。这种打包回一遍又一遍的直接生成文件到磁盘上，比较消耗资源。

其实还有一种方法可以实现类似的功能，那就是使用webpack-dev-server自动打包插件。

安装

npm install webpack-dev-server --save-dev

使用

安装完毕后，就可以使用命令执行它了：

npx webpack-dev-server

接下来，我们就可以直接在浏览器中输入网址 http://localhost:8080/ 来访问我们的项目了

注意：webpack-dev-server 会启动一个http服务器，将打包后的文件运行在该服务器下，不过打包后的文件并没有保存在磁盘上，而是在内存中临时存放。在浏览器中访问打包生成的文件，路径是从项目根目录开始的。

比如如果我们的webpack.config.json 这样配置：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        page1: './src/js/1.js'
    },
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/1.html',
            filename:'1.html'
        })
    ]
};

那么我们运行完npx webpack-dev-server 我们就可以使用 http://localhost:8080/1.html 和 http://localhost:8080/js/page1.js 来访问生成的html文件和js文件。而且只要我们的代码一发生变化，在浏览器中就可以看到变化后的效果。

配置

webpack-dev-server 除了采用默认配置，常见的还有几个配置，可以方便我们更改个性化的使用它，比如：

--open 打包完成后自动打开浏览器
--port 执行端口
--hot 热更新

比如可以这样用：

# 运行打包完成后自动打开浏览器
npx webpack-dev-server --open
# 运行打包完成后自动打开浏览器，使用的是9999端口
npx webpack-dev-server --open --port 9999

模块热更新

模块热更新(热替换)，其目的是为了加快用户的开发速度，提高编程体验。它并不适用于生产环境，这意味着它应当只在开发环境使用。

HMR即Hot Module Replacement，如果不启用热更新，我们会发现，当我们的某个模块中代码改变的时候，浏览器会自动刷新页面，进而达到出现新效果的目的。如果启用了热更新，当我们的某个模块中代码改变的时候，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。这样的好处有很多，比如：刷新次数少，消耗资源少，如果页面中有表单元素，那么就可以减少因刷新带来的重新填写问题等。

使用热更新比较简单，只需要webpack-dev-server 执行的时候加上--hot 即可：

npx webpack-dev-server --open --hot

注：对于在入口模块中的更改，一般还是会刷新整个页面。非入口模块中，热更新有效，不过修改代码最好别遇到错误，遇到错误，可能热更新失败。