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)