Hot Module Replacement (HMR:热模块替换)

HMR配置

启动 hmr，这里有添加热更新属性：

 

  devServer: {
    contentBase: "./dist",
    port: 8081,
    open: true,
    // 热替换
    hotOnly: true, // 模块刷新，不会做页面刷新
  },

配置⽂件头部引⼊ webpack

 

//const path = require("path");
//const HtmlWebpackPlugin = require("html-webpack-plugin");
//const CleanWebpackPlugin = require("clean-webpack-plugin");

const webpack = require("webpack");

在插件配置处添加了热更新插件，这个插件是webpack的内置插件所以前面需要先导入webpack：

plugins: [
	 new CleanWebpackPlugin(),
	 new HtmlWebpackPlugin({
		template: "src/index.html"
	 }),
	 new webpack.HotModuleReplacementPlugin()
 ],

处理css样式模块

新建index.css文件，并导入样式

案例：

 

index.js

 

import "./css/index.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);
};

//index.css
div:nth-of-type(odd) {
     background: yellow; 
}

注意启动 HMR 后， css 抽离会不⽣效，还有不⽀持 contenthash ，chunkhash

在修改样式后，无需重新打包刷新，且在在不改变任何其他数据的情况下，只修改样式。

处理js模块HMR

需要使⽤ module.hot.accept 来观察模块更新 从⽽更新

案例

在src下新建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;

src/number.js:

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

index.js内导入二者文件

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

// ? js模块 HRM 需要手动监听需要HMR的模块，当该模块额内容发生改变，会触发回调

if (module.hot) {   // 判断有没有启动HMR功能
     第一个参数为监听的回调
  module.hot.accept("./number.js", function() {
 
    document.body.removeChild(document.getElementById("number"));
    number();
  });
}

在修改js文件内的内容时无需更新，可达到即使刷新。