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