热更新？热更新原理？越早知道越好

使用首先向package.json 中增加一条命令"scripts": { "build": "

文件监听是在发现源码发生变化时，自动重新构建出新的输出文件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再去执行，默认300msaggregateTimeout: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 为 developmentmode: development 复制代码配置插件plugins: [ new webpack.HotModuleReplacementPlugin() ] 复制代码。

配置热更新devServer: { contentBase: ./dist, // 服务的基础目录 hot: true // 开启热更新 } 复制代码原理分析首先需要先了解几个概念Webpack Compile ：将 JS 源代码编译成 bundle.js。

HMR Server ：用来将热更新的文件输出给 HMR RuntimeBundle 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 文件做出了哪些变化。