4.6 热模块替换

4.6 热模块替换
问题一：模块热替换原理？

原理是当一个源码发生变化时，只重新编译发生变化的模块，再用新输出的模块替换掉浏览器中对应的老模块。

问题二：模块热替换技术的优势有：？

实时预览反应更快，等待时间更短。
不刷新浏览器能保留当前网页的运行状态，例如在使用 Redux 来管理数据的应用中搭配模块热替换能做到代码更新时 Redux 中的数据还保持不变。
问题三：模块热替换技术实现：？

都需要往要开发的网页中注入一个代理客户端用于连接 DevServer 和网页， 不同在于模块热替换独特的模块替换机制。

问题四：开启模块热替换模式？

第一种

DevServer 默认不会开启模块热替换模式，要开启该模式，只需在启动时带上参数--hot，完整命令是webpack-dev-server --hot。

第二种

还可以通过接入 Plugin 实现，相关代码如下：

const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

module.exports = {
entry:{
// 为每个入口都注入代理客户端
main:['webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server','./src/main.js'],
},
plugins: [
// 该插件的作用就是实现模块热替换，实际上当启动时带上 --hot 参数，会注入该插件，生成 .hot-update.json 文件。
new HotModuleReplacementPlugin(),
],
devServer:{
// 告诉 DevServer 要开启模块热替换模式
hot: true,
}
};
问题五：为什么没有地方接受过.css文件，但是修改所有的.css文件都会触发模块热替换呢？

原因在于style-loader会注入用于接受 CSS 的代码。