Webpack第五天

wade

发布于 2020-04-24 10:51:06

3270

发布于 2020-04-24 10:51:06

文章被收录于专栏：coding个人笔记coding个人笔记

现在已经可以热更新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();
    }
}