javascript - 如何将 Webpack 4 插件转换为 Webpack 5

Question

如何将这个在 Webpack 4 上工作的插件转换为 Webpack 5？
更具体地说，plugin()功能不再起作用。如何替换它以支持 Webpack 5？

const ConstDependency = require('webpack/lib/dependencies/ConstDependency');
const NullFactory = require('webpack/lib/NullFactory');

class StaticAssetPlugin {
  constructor(localization, options, failOnMissing) {
    this.options = options || {};
    this.localization = localization;
    this.functionName = this.options.functionName || '__';
    this.failOnMissing = !!this.options.failOnMissing;
    this.hideMessage = this.options.hideMessage || false;
  }

  apply(compiler) {
    const { localization } = this;
    const name = this.functionName;

    compiler.plugin('compilation', (compilation, params) => {
      compilation.dependencyFactories.set(ConstDependency, new NullFactory());
      compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
    });

    compiler.plugin('compilation', (compilation, data) => {
      data.normalModuleFactory.plugin('parser', (parser, options) => {
        // should use function here instead of arrow function due to save the Tapable's context
        parser.plugin(`call ${name}`, function staticAssetPlugin(expr) {
          let param;
          let defaultValue;
          switch (expr.arguments.length) {
            case 1:
              param = this.evaluateExpression(expr.arguments[0]);
              if (!param.isString()) return;
              defaultValue = param = param.string;
              break;
            default:
              return;
          }
          let result = localization(param);

          const dep = new ConstDependency(JSON.stringify(result), expr.range);
          dep.loc = expr.loc;
          this.state.current.addDependency(dep);
          return true;
        });
      });
    });
  }
}

module.exports = StaticAssetPlugin;

是否有任何我可以遵循的插件创建迁移指南？任何帮助将不胜感激。
谢谢。

Answer 1

您可以找到运行插件所需的合适环境详细信息 here .
除此之外，您还必须关心如何访问事件 Hook

compiler.hooks.someHook.tap('MyPlugin', (params) => {
  /* ... */
});

你可以得到更多关于它here

将现有插件转换为 Webpack 5，您可以点击特定的事件 Hook 并完成它。
如果您尝试使用 Webpack 5 使用上述代码运行插件，您将收到以下错误。

很多文章会建议你更新webpack-cli这还不够。

const ConstDependency = require('webpack/lib/dependencies/ConstDependency');
const NullFactory = require('webpack/lib/NullFactory');

const PLUGIN_NAME = 'StaticAssetPlugin';

class StaticAssetPlugin {
  constructor(localization, options, failOnMissing) {
    this.options = options || {};
    this.localization = localization;
    this.functionName = this.options.functionName || '__';
    this.failOnMissing = !!this.options.failOnMissing;
    this.hideMessage = this.options.hideMessage || false;
  }
  
  apply(compiler) {
    const { localization } = this;
    const name = this.functionName;
    
    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation, params) => {
      compilation.dependencyFactories.set(ConstDependency, new NullFactory());
      compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
    });
    
    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation, data) => {
      data.normalModuleFactory.hooks.parser.for('javascript/auto').tap(PLUGIN_NAME, (parser, options) => {
        parser.hooks.expression.for('this').tap(PLUGIN_NAME, function staticAssetPlugin(expr) {
          let param;
          let defaultValue;
          switch (expr.arguments.length) {
            case 1:
            param = this.evaluateExpression(expr.arguments[0]);
            if (!param.isString()) return;
            defaultValue = param = param.string;
            break;
            default:
            return;
          }
          let result = localization(param);
          
          const dep = new ConstDependency(JSON.stringify(result), expr.range);
          dep.loc = expr.loc;
          this.state.current.addDependency(dep);
          return true;
        });
      })
    });
  }
}

module.exports = StaticAssetPlugin;

重要的是，您必须决定需要从 compiler 访问哪个事件 Hook 。和 parser .您将在此处获得流行的钩子(Hook)列表，用于 compiler对于 parser .
您只需访问钩子(Hook)即可获得完整的钩子(Hook)列表。
编译器

console.log(compiler.hooks);

对于解析器

console.log(parser.hooks);

你可以相应地选择。