How to convert Webpack 4 plugin to Webpack 5-CodePudding

The

Many articles will suggest you update webpack-cli which is not enough.

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;

Importantly you have to decide which event hook you need to access from compiler and parser. You will get a list of popular hooks here, for the compiler for parser.

You can get a complete list of hooks just by accessing hooks.

for compiler

console.log(compiler.hooks);

for parser

console.log(parser.hooks);

You can choose accordingly.