11. 模块热替换（HMR）

模块热替换 ：当修改一个js或者css的时候，只刷新修改的内容，不进行整个页面的刷新。

1、若本地服务器是使用webpack-dev-server的，则把hot : true 加上

devServer : {
    contentBase : './dist',
    host : 'localhost',
    port : 8080,
    open : true,
    hot : true,  //这里

}

2、配置2个插件

plugins:[
    new webpack.NamedModulesPlugin(), //当开启HMR替换的时候，用于显示模块相对路径
    new webpack.HotModuleReplacementPlugin() // HMR替换插件
]

ps ：若有使用mini-css-extract-plugin整个插件请注释掉，它和HMR有冲突，不能一起使用。

完成以上工作，当我们修改css的时候，页面不会自动刷新，只会更新我们修改后的css。

然后继续修改js后会发现，整个页面刷新了，那是因为dev-server默认修改了js会刷新页面，只需要把dev-server的hotOnly : true打开。如 ：

devServer : {
    contentBase : './dist',
    host : 'localhost',
    port : 8080,
    open : true,
    hot : true, 
    hotOnly : true, //这里
},

即可。这里表示js修改了只有热更新，不要自动刷新页面。然后在要热更新的js写上这句判断 ：

if(module.hot){ 
    module.hot.accept();
}

因为js和css的HMR不一样，需要手动更新