十八、Hot Module Replacement 的使用 ------ 2019-05-14

一、什么是Hot Module Replacement?
Hot Module Replacement 中文叫热模块替换，简称HMR，当我们在项目中使用webpack-dev-server时，每当我们修改项目中的CSS或者JS文件时，webpack-dev-server会监听到被打包文件发生的变化，然后帮我们刷新浏览器；但是我们仅仅改变的是CSS或者JS的代码，并不想把整个页面都重新刷新，那我们就可以启用webpack-dev-server中的Hot Module Replacement模块，webpack-dev-server会监听项目文件的改变，当CSS或者代码发生变化时，webpack-dev-server并不会帮我们刷新整个页面而仅仅是替换样式文件或者重新执行对应的JS模块；

二、HMR的原理：

+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     console.log('Accepting the updated printMe module!');
+     printMe();
+   })
+ }
原理：这段代码的意思是：判断项目中是否启用了module.hot模块，如果启用了，就执行if语句中的代码；

module.hot.accept('文件名字',function (){
));
这个函数接收两个参数，第一个是文件的名字，第二个是回调函数，也就是当监听的文件发生变化时，就执行回调函数；我们可以在回调函数中做一些处理；
这就是HMR实现的原理，由于webpack中的样式处理模块（css-loader、less-loader）已经帮我们实现了底层处理，因此只要我们开启了HMR就能够实现CSS的自动更新，但是JS的loader并没有实现，因此需要我们手动去实现；

三、HMR的配置

1、
devServer: {
        contentBase: './bundle',
        open: true,
        port: 8081,
        hot: true,
        // hotOnly: true
    },
在webpack的配置文件webpack.config.js的devServer节点中，新增hot配置选项；

2、
 const webpack = require('webpack');
 plugins: [new HtmlWebpackPlugin({
            template: './src/index.html'
        }), 
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()//使用HotModuleReplacementPlugin插件
    ],
同时，在webpack的插件中启用HotModuleReplacementPlugin()插件；这个插件是webpack自带的；
3、注意事项：
不能在使用HotModuleReplacementPlugin插件的同时开启hotOnly；