将内联插件 webpack 4 转换为 webpack 5

Question

对于我的项目，我使用带有 Karma 的 webpack 4 来运行我的测试。一切正常。我成功迁移到 webpack 5.

但是，我有一个在 GitHub 上找到的自定义内联插件，但我不知道如何转换它以使其在 webpack 5 上运行。

webpack.config

// ...
plugins: [
    // ...
    function()
    {
        this.plugin("done", function(stats)
        {
            if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1)
            {
                console.log(stats.compilation.errors);
                process.exit(1); // or throw new Error('webpack build failed.');
            }
            // ...
        });
    }
    // ...
],
// ...

的确，我在 webpack 5 上有这个错误：

09 03 2021 01:56:20.991:ERROR [karma-server]: Error during file loading or preprocessing

TypeError: this.plugin is not a function

Answer 1

我想你可以跟进official document然后它会正常工作。

顺便说一句，您的代码可能应该更改为：

{
  // ...
  plugins: [
    new class YourPlugin {
      apply(compiler) {
        compiler.hooks.done.tap('YourPlugin', (
          stats
        ) => {
          if (
            stats.compilation.errors && 
            stats.compilation.errors.length && process.argv.indexOf('--watch') == -1
          ) {
            console.log(stats.compilation.errors);
            process.exit(1); // or throw new Error('webpack build failed.');
          }
        });
      } 
    }
  ]
}

将内联插件 webpack 4 转换为 webpack 5

Convert inline plugin webpack 4 to webpack 5

webpack

webpack-4

webpack-5