Hot Module Replacement热更新（webpack学习篇9）

模块热替换(HMR - Hot Module Replacement)作用：是指在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

• 保留在完全重新加载页面时丢失的应用程序状态。
• 只更新变更内容，以节省宝贵的开发时间。
• 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

热更新配置：(在devServer对象里配置)

webpack.config.js

// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 引入热更新插件，为webpack中自带的插件
const webpack = require('webpack');

// Common.js语法
module.exports = {
  mode: 'development', // 默认模式为production，可不写，不写时打包运行命令行会有警告
  devtool: 'cheap-module-eval-source-map',
  entry: {
    main: './src/index.js'
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true, // 让webpack-dev-server开启热更新的功能
    hotOnly: true // 即便是hot配置（HMR）没有生效，也不让浏览器进行刷新,失效时不做其他处理
  }, 
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }]
  },
  plugins: [
  	new HtmlWebpackPlugin({
      template: './src/index.html'
    }), 
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin() // 实例化热更新插件
  ],
  output: {
    filename: 'dist.js', // 打包之后的输出文件
    path: path.resolve(__dirname, 'dist') 
  }
}

// 配置完之后，一定要重新执行打包，不然配置项不会生效
// 样式文件变化，页面只修改展示样式，不会进行页面的刷新操作，也不会更改之前js操作的内容。

配置项的作用：

• hot: true ===> 让webpack-dev-server开启热更新的功能
• hotOnly: true ===> 即便是hot配置（HMR）没有生效，也不让浏览器进行刷新 (失效时不做其他处理)
• HotModuleReplacementPlugin为webpack自带的热更新插件，所以要直接引入webpack，在plugins配置项中进行实例化。

热更新的应用：

在css方面应用：

目录结构：

|--demo
	|--node_modules
	|--src
		|--index.js
		|--style.css
		|--index.html
	|--package.json
	|--package-lock.json
	|--webpack.config.js

src/style.css

div:nth-of-type(odd) {
  background: #2086d7;
}

src/index.js

import './style.css';
var btn = document.createElement('button');
btn.innerHTML = '新增';
document.body.appendChild(btn);
btn.onclick = function() {
  var div = document.createElement('div');
  div.innerHTML = 'item'; 
  document.body.appendChild(div);
}

执行打包：

npm  run  start

页面展示效果如图：（点击新增按钮，新增item项之后的效果）

此时，再去修改style.css里的样式：(把偶数行的背景色改为粉色)

div:nth-of-type(odd) {
  background: pink;
}

页面展示效果为：（没有刷新浏览器，只更改了样式）

如果不开启热更新，修改样式之后，由于浏览器刷新，页面会恢复到初始状态，页面上只保留一个"新增"按钮，再去点击的时候，才会有不同颜色的item显示在页面中。

在js方面的应用：

目录结构：

|--demo
	|--node_modules
	|--src
		|--counter.js
		|--number.js
		|--index.js
		|--index.html
	|--package-lock.json
	|--package.json
	|--webpack.config.js

counter.js

function counter() {
  var div = document.createElement('div');
  div.setAttribute('id', 'counter');
  div.innerHTML = 1;
  div.onclick = function() {
    div.innerHTML = parseInt(div.innerHTML, 10) + 1
  }
  document.body.appendChild(div);
}

export default counter;

number.js

function number() {
  var div = document.createElement('div');
  div.setAttribute('id', 'number');
  div.innerHTML = 1000; 
  document.body.appendChild(div);
}
export default number;

index.js

import counter from './counter';
import number from './number';
counter();
number();

// 这里需要判断下是否开启了热更新，如果开启了，就只让number函数再执行一次，否则不会热更新
if(module.hot) {
  module.hot.accept('./number', () => {
    document.body.removeChild(document.getElementById('number'));
    number();
  })
}

本质上要实现HMR，都要写类似以上（判断是否开启热更新，单独执行某代码块）的代码，否则不会热更新。但在很多时候，我们开发过程中，并没有去写这样的代码，是因为在相应的loader中，已经帮我们实现了热更新的代码。如：

• css-loader中同样也配置了热更新，也不需要自己额外添加代码
• 我们使用的vue框架里，vue-loader里也已经配置了热更新，所以不需要额外添加代码

index.js中引入两个模块，如果不开启热更新，那么当一个模块里的数据变化了，就会导致页面刷新，使另一个模块内的数据也恢复到初始值，如果我们想一个模块里的js代码的变化，不影响另一个模块代码变更过的数据，每改一个js模块里的代码，只会更新当前模块的数据，不会影响其他js模块的数据。以上需求可借助HMR来实现，

执行打包：

npm  run  start

页面展示效果：（第一行数字带有点击事件，初始值为1，每点击一次数值会加1）

当点击数字值增加为7时，去修改number.js模块里的代码，把1000修改为3000，此时页面不刷新，counter.js模块里的数字7也没有变化，只更改了当前模块修改的数据。如下图：

这就是热更新的巧妙之处。? (如果不开启热更新，修改number.js里的代码后，由于页面会刷新，counter.js里的数字也会变成初始值1)