13-webpack环境优化

HMR（模块热替换）

模块热替换(Hot Module Replacement 即 HMR)是 webpack 提供的最有用的功能之一, 它允许在运行时更新各种模块, 而无需进行完全刷新。
启用这个功能，只需要修改一下 webpack.config.js 的配置, 使用 webpack 内置的 HMR 插件就可以了， 在devServer中使用hot参数（只能监测到js的热替换，html不可以）

devServer: {
      contentBase: resolve(__dirname, "build"),
      //启动gzip压缩
      compress: true,
      //设置服务器端口号
      port: 3000,
      //自动打开浏览器
      open: true,
      hot: true
}

启用 webpack 内置的 HMR插件后, module.hot 接口就会暴露在 index.js 中, 接下来需要在 index.js 中配置告诉 webpack 接受HMR的模块。

1. 样式HMR功能，在开发环境中使用style-loader

2. HTML的HMR功能，默认也没有HMR功能（不用做HMR功能），需要在entry入口中引入html文件。
   entry: ['./src/js/index.js','./src/index.html']
   这样index.html 一有变化，webpack也能自动刷新网页

3. js的HMR功能，默认没有HMR功能，只能处理非入口文件的js文件。
   启用 webpack 内置的 HMR插件后, module.hot 接口就会暴露在 index.js 中, 接下来需要在 index.js 中配置告诉 webpack 接受HMR的模块

index.js添加

if (module.hot) {
//只监听这个文件的变化
    module.hot.accept('./print.js', function() { //告诉 webpack 接受热替换的模块
        console.log('Accepting the updated printMe module!');
        printMe();
    })
}

//服务器检测到了 print.js 的代码变化并且执行了 module.hot.accept 的回调函数