Webpack第五天

Posted 2021-04-29 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();
    }
}

 

说真的，我并不知道这个方法的原理，只能是照搬来实现更新的效果。并且也没有查到关于这个方法的讲解。

（完）

Coding 个人笔记