Webpack第五天
现在已经可以热更新css和js，打包也能打包了，现在要做HTML的热更新。很惭愧，找了很多资料，总说纷纭，在使用了raw-loader之后，在入口文件引入HTML，是可以刷新HTML，这边要注意，是刷新，不是热更新。
但是遇到了一个问题，在使用了热更新，能监听到HTML的修改，但是HTML没有插入成功。所以在两者之间比较之后，认为一般使用webpack的会使用框架，而框架几乎都是通过模块或者模板等去插入到HTML的某个根节点，所以保留热更新。
在zed之前的写的webpack总结里面，他找到了一个保留热更新，还能刷新页面的方法，注意，是刷新页面。
在devServer里面添加参数：
before(app, server) {
devServer = server;
}在plugin里面添加reloadHtml，要特别注意，必须HtmlWebpackPlugin后面加这个。
在module.exports外面添加方法：
function reloadHtml() {
this.plugin('compilation',
thing => thing.plugin('html-webpack-plugin-after-emit', trigger));
const cache = {};
function trigger(data, callback) {
const orig = cache[data.outputName];
const html = data.html.source();
// plugin seems to emit on any unrelated change?
if (orig && orig !== html)
devServer.sockWrite(devServer.sockets, 'content-changed');
cache[data.outputName] = html;
callback();
}
}（完）
举报
腾讯云开发者
