老师HotModuleReplacementPlugin是做什么用的，没有手动引入也可以完成热更新。但是手动引入之后就会报错，ERROR in chunk main [entry] ./source2019/css/main_34800f5bbbfca82eb93c.css Cannot use [chunkhash] or [contenthash] for chunk in './source2019/js/[name]_[contenthash].js' (use [hash] instead) 用的是MiniCssExtractPlugin将css单独保存

作者回复: 这里面的热更新有最核心的是 HMR Server 和 HMR runtime。 HMR Server 是服务端，用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。 HMR Runtime是浏览器端，用于接受 HMR Server 传递的模块数据，浏览器端可以看到 .hot-update.json 的文件过来。继续回到这个问题：老师HotModuleReplacementPlugin是做什么用的？ webpack 构建出来的 bundle.js 本身是不具备热更新的能力的，HotModuleReplacementPlugin 的作用就是将 HMR runtime 注入到 bundle.js，使得bundle.js可以和HMR server建立websocket的通信连接

2019-06-13

2

43

Mavericker

webpack.HotModuleReplacementPlugin 没有必要加，官网文档说配置了 hot: true 会自动引入这个 plugin。

作者回复: 嗯嗯，这里面也是出于演示 HMR Runtime

2019-06-01



25

驴肉蒸饺

还是没太理解webpack-dev-server和hot-module-replacement-plugin之间的关系。请问老师，为什么二者不能合二为一呢，而要单独写两个包？然后用的时候又要组合来使用。目的是什么，请教老师，谢谢您。

作者回复: 需要从两者的功能上来分析说明： webpack-dev-server(WDS)的功能提供 bundle server的能力，就是生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问，另外 WDS 也提供 livereload(浏览器的自动刷新)。 hot-module-replacement-plugin 的作用是提供 HMR 的 runtime，并且将 runtime 注入到 bundle.js 代码里面去。一旦磁盘里面的文件修改，那么 HMR server 会将有修改的 js module 信息发送给 HMR runtime，然后 HMR runtime 去局部更新页面的代码。因此这种方式可以不用刷新浏览器。单独写两个包也是出于功能的解耦来考虑的。简单来说就是：hot-module-replacement-plugin 包给 webpack-dev-server 提供了热更新的能力。

2019-05-31



13

从小就很酷

> webpack-dev-server --open 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。

作者回复: npm i webpack-dev-server -D，安装下这个包依赖

2019-06-05

2

9

小果果

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。并没有启动成功

作者回复: 你需要在项目里面安装下这个依赖哈， npm i webpack-dev-server -D

2019-06-07



2

浏览器有刷新

作者回复: webpack-dev-server 默认是会在内容编译完成后自动刷新(liveload)浏览器的，此处增加了 HotModuleReplacementPlugin 插件之后可以做到 HMR的。如果HMR失败的化会降级使用 liveload 自动刷新浏览器模式。

2019-05-30

2

2

小伙儿爱裸睡

@范饭飯官网对于devServer中hot的解读的确提到了开启此配置时会自动添加HotModuleReplacementPlugin插件，1楼并未误导他人，你可以将手动引入的plugin删除以检验是否正确。官网链接：https://webpack.js.org/configuration/dev-server/#root

作者回复: 嗯嗯，是的。这里引入 HotModuleReplacementPlugin 也是为了更好的说明热更新的 HMR runtime 的含义，就是通过这个插件给 bundle.js 注入 HMR runtime 的

2019-06-13



1

爱吃橙子的菜牙

编辑器的哪个主题呢，配色很好看

作者回复: 是 One Monokai

2019-06-01



1

Scorpio

dev那边一直失败。一下说没有webpack-cli 一下说没有commond。。。。

作者回复: 这种情况下可以考虑把 node_modules删掉重新运行下 npm install

2019-06-10





夏目有三三

有个问题，热更新应该是不写磁盘的，那为什么老师的demo里修改了src中的代码，页面里是dist中的 search.html 更新了呢？

作者回复: 不会更新的，热更新的情况下是放在内存里的。这个章节也讲到了，热更新分两个阶段，启动阶段还是依赖磁盘文件去编译。更新阶段是直接内存增量更新的

2019-06-08





收起评论