webpack中热模块更新

Hot Module Replacement，热模块更新，很多时候会简写成HMR。

"scripts": {
　　"start": "webpack-dev-server",
},

在加热更新之前，我们运行npm run start，会发现之前我们打包有个dist目录，为什么运行这个命令的时候，dist目录没有了。实际上，webpack-dev-server，还是会对src目录下进行打包的。但是打包生成的文件，他并不会放在dist目录下。而是放到电脑中的内存里面。这样的话，可以有效的提升打包的速度。让我们开发更快，所以不用担心。

index.js

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);
}

这个js是点击一下新增，就新增一个item的div。现在我要实现一个样式的效果。偶数的时候给他加个背景

style.css

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

这个时候我把yellow改成blue。webpack-dev-server检测到代码对变化就会重新刷新，需要重新点击去测试。那之前好不容易点的东西没有了，又要重新点击，于是我就希望，当改变样式代码的时候，不要刷新页面，只要改变样式就行了，不要给我删除掉之前的dom。这个时候就用到了HMR

module.exports = {
　　// 起个服务器
　　devServer: {
　　　　// 这个意思是服务器要生成在哪个文件夹下
　　　　contentBase:'./dist',
　　　　// 启动的时候自动打开浏览器，然后自动访问这个服务器地址
　　　　open:true,
　　　　// 开启Hot Module Replacement
　　　　hot: true,
　　　　// 即便hmr的功能没有生效，浏览器也不要自动刷新
　　　　hotOnly: true
　　},
　　// HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
　　plugins: [
　　　　new HtmlWebpackPlugin({
　　　　　　template: 'src/index.html'
　　　　}),
　　　　new CleanWebpackPlugin(),
　　　　// 当dev-server,两项host配置搞定后，再使用这个插件后，hmr功能就生效了
　　　　new webpack.HotModuleReplacementPlugin()
　　],
}

这个时候再去更改样式，就不会影响之前js对html的变更。改了css文件，就只会替换css的内容

所以使用HMR的好处是,在写css的时候，方便调试css。

 

这是时候再把上面的配置恢复到没有hmr的时候

module.exports = {
　　// 起个服务器
　　devServer: {
　　　　// 这个意思是服务器要生成在哪个文件夹下
　　　　contentBase:'./dist',
　　　　// 启动的时候自动打开浏览器，然后自动访问这个服务器地址
　　　　open:true
　　},
　　// HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
　　plugins: [
　　　　new HtmlWebpackPlugin({
　　　　　　template: 'src/index.html'
　　　　}),
　　　　new CleanWebpackPlugin()
　　],
}

index.js

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

counter();
number();

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;

 

这个时候运行页面，把1增加到10。这个时候将number.js里面写死的1000变成2000。发现，呀，我之前点击到的10，又重新恢复到了1。说明刷新了页面。之前的一些数据没有保存下来。我希望number的数据更新到，别去更新我counter.js到内容。这时候把配置加回来

module.exports = {
　　// 起个服务器
　　devServer: {
　　　　// 这个意思是服务器要生成在哪个文件夹下
　　　　contentBase:'./dist',
　　　　// 启动的时候自动打开浏览器，然后自动访问这个服务器地址
　　　　open:true,
　　　　// 开启Hot Module Replacement
　　　　hot: true,
　　　　// 即便hmr的功能没有生效，浏览器也不要自动刷新
　　　　hotOnly: true
　　},
　　// HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
　　plugins: [
　　　　new HtmlWebpackPlugin({
　　　　　　template: 'src/index.html'
　　　　}),
　　　　new CleanWebpackPlugin(),
　　　　// 当dev-server,两项host配置搞定后，再使用这个插件后，hmr功能就生效了
　　　　new webpack.HotModuleReplacementPlugin()
　　],
}

发现number代码改成2000，页面上的1000并没有变成2000。这个时候需要自己去加点代码

index.js

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

counter();
number();

if(module.hot) {
　　module.hot.accept('./number', ()=>{
　　　　let removeNode = document.getElementById('number');
　　　　document.body.removeChild(removeNode);
　　　　number();
　　})
}

这个时候把1点到10。再去更改number里面的代码，把1000改成2000。这个时候发现10没有任何变化，只从1000更新到20000。

 

那么这个时候就会想css会自动更新，这里却要在index里面多加这层判断。其实css也是要加这层判断的，只是css-loader里面已经加了这段代码，所以不用写。react,vue里面也内置了这些代码。本质上要写hmr的内容，都需要写这段。只不过框架帮我们实现了，自己不用去写。