说下热模块更新这个时常被谈到的问题,工作中也比较常见到、面试中也比较常问到的问题。 git仓库:webpack-demo
HMR
(Hot Module Replacement)也就是热模块更新,是用来干什么的呢?就是你可以实时的更新某个状态而浏览器不重新刷新。div
块的颜色从白色改为黑色,最直接方便的办法是怎样?不是去编辑器里面改代码,然后等浏览器refresh
这样去看效果;而是直接打开调试着工具,改一下它的颜色就可以看到效果了。div
块默认隐藏的,是需要某个点击步骤后才能展示,你改代码导致浏览器refresh
后破坏了这个状态,那么就还需要还原前置的点击操作,才能看到效果。div
块的颜色变为黑色的效果,而要让它show前置化操作就需要点击一百次操作,你说你好不容易点了一百次才让这个div
块的显示了,结果你改下编辑器里面的代码,浏览器重刷新了,又要来一遍,你说就看个颜色的效果怎么就这么难?HMR
这个东西就是可以让你在代码编辑器里面把白色改为黑色后,而浏览器不会重刷新。HMR
是帮助你提高开发效率的,其实吧,我觉得并没有什么卵用,至少是没有很大的作用吧,可能我业务开发涉及的页面比较菜吧,切图的时候浏览器你爱重刷新就重刷新,只要别跟微信开发者工具一样有时候改了代码却不刷新就行。。。那就卧槽了。。。webpack
中的devSever
这个配置项,前面chapter10讲过这部分内容。--> 10、webpack从0到1-devServer之数据请求devServer
的参数hot:true
,这就表示开启了热模块更新了。module.exports = {
// ...
// 配置Server
devServer: {
contentBase: "./dist",
port: "8080",
open: true,
+ hot: true,
},
// ...
}
HotModuleReplacementPlugin
插件,比如此刻的webpack中文文档demo就是这样演示的,但是你去看英文最新的文档就会发现,当你设置了hot:true
以后,这个插件就会自动引入了,完全不用配置这步骤了,中文文档还是有点落后的,不过问题不大。
MiniCssExtractPlugin
这个插件代替了style-loder
,而css的热模块更新是需要style-loader
这个东西配合的,所以需要把设置css代码分割的内容删掉。- const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ...
devServer: {
contentBase: "./dist",
port: "8080",
open: true,
hot: true,
},
module: {
rules: [
{
test: /\.css$/,
use: [
- MiniCssExtractPlugin.loader,
+ "style-loader",
"css-loader",
"postcss-loader"
]
},
]
}
// ...
}
less
、sass
和plugins
里面处理代码分割的东西都要删除替换。然后我们改个颜色来演示下HRM
的作用,你会看到浏览器没有refresh而颜色变化了。默认状态 | 点击body生成footer | 编辑器中将其修改为骚粉 |
---|---|---|
webpack-dev-server
这个插件,设置个hot:true
就可以开启HRM了,webpack会自动帮我们引入HotModuleReplacementPlugin
这个插件,所以,HRM
的实现肯定是和这两个插件有关的。hot-module-replacement-plugin
这个插件会生成一个hotModuleReplacement.runtime.js
文件并注入到主文件main.bundle.js
中,里面就是一些逻辑相关的啊、回调函数啥的,大概可以这么理解。xxx.hot-update.js
的文件产生,这是前提;
hotModuleReplacement.runtime.js
里面的方法会开始执行了,他会向服务端ajax
发送请求,然后服务端就会把这个包含了更新信息的xxx.hot-update.js
交给客户端。hot-update.js
文件就知道哪里变了,然后就会去局部的更新代码。