我正在为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;
深入研究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;