文件监听和热更新事理分析

wepack 开启监听模式，有两种办法：

启动 webpack 命令时，带上 --watch 参数在配置 webpack.config.js 中设置 watch: true

"scripts": { "build": "webpack", "watch": "webpack --watch"}

事理剖析

轮训去判断文件的 末了编辑韶光 是否发生变革。
当某个文件发生了变革，并不会急速见告监听者，而是先缓存起来，等待一定韶光段 aggregateTimeout ，在这个韶光段内，如果有其他的文件也发生了变革，那么他终极会把这些变革了的文件列表一起去构建，一起把构建的结果天生到 bunlde 文件中去。

module.exports = { // 默认 false，不开启 watch: true, // 只有开启监听模式时，watchOptions 才故意义 watchOptions: { // 默认为空，不监听的文件或者文件夹，支持正则匹配 ignored: /node_modules/, // 监听到变革发生后会等 300ms 再去实行，默认 300ms aggregateTimeout: 300, // 判断文件是否发生变革是通过一直讯问系统指定文件有没有变革实现的，默认每秒问 1000 次 poll: 1000 }}

虽然设置了文件监听，但是更新之后我们还是须要手动刷新浏览器才能看到更新，那么 webpack 有没有更好的办法呢？

热更新

借助 webpack-dev-server，当代码有修正时自动去构建，构建完成后通过热更新的办法让浏览器的内容自动去变革。
热更新须要 webpack-dev-server 和 HotModuleReplacementPlugin 一起结合利用。

比较 watch 的其余一个上风是，没有磁盘的 IO，它输出的文件不放在磁盘文件中，而是放在内存中，以是他的构建速率会有更大的上风。

利用首先向 package.json 中增加一条命令"scripts": { "build": "webpack", "watch": "webpack --watch", "dev": "webpack-dev-server --open" // open 参数每次构建完成自动开启浏览器 } 复制代码热更新在开拓模式中才会利用，修正 webpack.config.js 中的 mode 为 development。
mode: 'development' 复制代码配置插件plugins: [ new webpack.HotModuleReplacementPlugin() ] 复制代码配置热更新devServer: { contentBase: './dist', // 做事的根本目录 hot: true // 开启热更新 } 复制代码事理剖析

首先须要先理解几个观点。

Webpack Compile ：将 JS 源代码编译成 bundle.js

HMR Server ：用来将热更新的文件输出给 HMR Runtime

Bundle Server ：供应文件在浏览器的访问，以做事的办法访问

HMR Runtime ：会被注入到浏览器，更新文件的变革

bundle.js ：构建输出的文件

HMR Runtime 和 HMR Server 会建立起一条链接，常日是 websocket，就可以实时更新文件的变革。

热更新的两个过程

启动阶段 1 - 2 - A - B首先我们在文件系统便写完代码之后，Webpack Compile 将源代码和 HMR Runtime 一起编译成 bundle 文件，传输给 Bundle Server，Bundle Server 是一个做事器，这样在浏览器里就可以以做事的办法访问文件。
更新阶段 1 - 2 - 3 - 4当我们在文件系统更新文件之后，还是会经由 Webpack Compile 的编译，Webpack Compile 会将编译后的结果通报给 HMR Server，HMR Server 会比较哪些文件发生了变革，由于做事真个 HMR Server 会和客户真个 HMR Runtime 建立起一条 websocket 链接，以是 HMR Server 会以 json 的形式关照给 HMR Runtime 文件做出了哪些变革。