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文件内的内容时无需更新,可达到即使刷新。

 

你可能感兴趣的:(webpack)