webpack - 强制 webpack-dev-server 重新加载

Question

我正在为 webpack 编写一个插件，它使用 EXECA 在后台启动良好的围栏。工作结束后，我将错误添加到 compilation.errors 数组中。由于 execa 在单独的进程中运行，因此在 webpack 编译过程完成后添加了错误。结果，webpack-dev-server 重新加载页面而没有错误。我不得不手动重新加载页面以查看错误。有没有办法强制 webpack-dev-server 重新加载？

const execa = require('execa');

class GoodFencesWebpackPlugin {
    apply(compiler) {
        let subprocess = null;

        compiler.hooks.make.tap('GoodFencesWebpackPlugin', async (compilation) => {
             const logger = compiler.getInfrastructureLogger('GoodFencesWebpackPlugin');

            if (subprocess) {
                subprocess.kill();
                subprocess = null;
            }

            subprocess = execa('good-fences');
            try {
                await subprocess;
            }
            catch (err) {
                logger.error("\x1b[31m", err.stderr);
                compilation.errors.push(err.stderr);
            }

            subprocess = null;
        })
    }
}

module.exports = GoodFencesWebpackPlugin;

Answer 1

在挖掘 webpack-development-server 源代码后，我发现可以通过在编译器实例上调用 done 钩子以编程方式进行 LiveReoload。它正在工作，因为我更新了编译错误。所以我做了以下

const execa = require('execa');

class GoodFencesWebpackPlugin {
    apply(compiler) {
        console.log("plugin");
        let subprocess = null;
        let thisStats;

        compiler.hooks.done.tap('GoodFencesWebpackPlugin', async (stats) => {
            thisStats = stats;
        });

        compiler.hooks.afterEmit.tap('GoodFencesWebpackPlugin', async (compilation) => {
             const logger = compiler.getInfrastructureLogger('GoodFencesWebpackPlugin');
            if (subprocess) {
                subprocess.kill();
                subprocess = null;
            }

            subprocess = execa('good-fences');
            try {
                await subprocess;
            }
            catch (err) {
                logger.error("\x1b[31m", err.stderr);
                compilation.errors.push(err.stderr);
                if (thisStats) {
                    compiler.hooks.done.callAsync(thisStats, () => {});
                }
            }
            finally {
                subprocess = null;
            }
        })
    }
}

module.exports = GoodFencesWebpackPlugin;