本文介绍了webpack中开启文件监听的两种方法以及热更新的原理

文件监听

webpack中，为了避免每次更新代码后都需要手动构建，可以开启文件监听选项。开启文件监听后，webpack会调用Node.js里面的文件读取API fs这个模块来判断文件内容是否变化，并且在文件变化的时候自动构建。
开启文件监听的方法有两种：

命令行
webpack.config.js中进行配置

命令行

在启动webpack命令的时候，带上--watch参数即可，即：

1	webpack --watch

配置文件

// webpack.config.js
module.exports = {
    // ...
    // 是否开启文件监听，默认false，即不开启
    watch: true,
    // 只有设置了 watch === true，watchOptions才有用
    watchOptions: {
        // 不监听的文件或文件夹，支持正则，默认为空
        ignored: /node_modules/,
        // 监听到改变后的延时，默认300ms
        aggregateTimeout: 300,
        // 轮询间隔，默认1000ms
        poll: 1000
    }
}

热更新

使用

热更新需要使用到插件webpack-dev-server(WDS)，WDS使用时需要配合插件HotModuleReplacementPlugin一起使用（这个插件会在配置hot: true自动添加，可以不手动添加）
首先，先安装WDS：

1	npm i webpack-dev-server -D

使用时，在webpack.config.js中配置下devServer：

// webpack.config.js
module.exports = {
    // ...
    devServer: {
        contentBase: './dist', // WDS的基础目录
        hot: true
    }
}

最后使用命令webpack-dev-server --open启动即可

–open：在构建结束后自动打开浏览器

原理

webpack compiler: 将JS构建为Bundle
HMR Server: 将热更新的文件输出给HMR Runtime
Bundle Server: 提供文件在浏览器访问
HMR Runtime: 被注入到bundle.js中，更新文件变化
bundle.js: 构建输出的文件

热更新中最核心的是HMR Server和HMR Runtime：
HMR Server是服务端，用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。
HMR Runtime是浏览器端，用于接受 HMR Server 传递的模块数据，浏览器端可以看到 .hot-update.json 的文件。

热更新分为两个阶段：

启动阶段：
启动阶段就是在文件系统中，将初始代码通过Webpack Compiler打包，并将打包好的代码，传输给Bundle Server。Bundle Server其实就是一个服务器，通过Bundle Server，浏览器就能访问到打包好的文件。这个过程即图上的 1 -> 2 -> A -> B
更新阶段：
如果文件系统中的代码发生了改变，代码还是会经过Webpack Compiler打包，打包好了会把代码发送给HMR Server，HMR Server中能够对比得到具体是哪些文件发生了改变。接着HMR Server就会通知HMR Runtime，HMR Runtime就会更新代码，最终就可以不需要刷新浏览器就看到最新的代码。即图上的 1 -> 2 -> 3 -> 4 -> 5

种星星

webpack中的文件监听及热更新

文件监听

命令行

配置文件

热更新

使用

原理