如何将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;

有没有插件创建的迁移指南可以供我参考？非常感谢您的帮助。

谢谢。

- Mohammad Dohadwala

Answer 1

您可以在此处找到运行插件所需的适当环境详细信息。除此之外，您还必须关注如何访问事件钩子。

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

您可以在此处了解更多相关IT技术信息。

---

将您现有的插件转换为Webpack 5，您可以挖掘特定的事件钩子并完成操作。 如果您尝试使用上述代码在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 和 parser 访问哪个事件钩子。您可以在这里获取流行钩子的列表，适用于编译器 和 解析器。

您可以通过访问钩子来获取完整的钩子列表。

对于编译器

console.log(compiler.hooks);

用于解析器

console.log(parser.hooks);

您可以根据需求进行选择。

- MORÈ