如何在 webpack5 中创建外部插件？

如何解决如何在 webpack5 中创建外部插件？

我尝试创建一个可以要求 webpack 不捆绑东西的外部插件。由于threads-plugin不接受webpack的外部设置，所以它只能使用plugin来处理外部事物。

我尽力做到这一点：

const modulefilenameHelpers = require('webpack/lib/modulefilenameHelpers');
const ExternalModule = require('webpack/lib/ExternalModule');

class ExternalsPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    const options = this.options;
    compiler.hooks.normalModuleFactory.tap('ExternalsPlugin',function (nmf) {
      nmf.hooks.resolve.tapAsync(
        {
          name: 'normalModuleFactory',stage: 100,},function (module,callback) {
          if (modulefilenameHelpers.matchObject(options,module.createData.resource)) {
            const { context,dependencies } = module;
            const newModule = new ExternalModule(module.request,options.type || compiler.options.output.libraryTarget);
            callback(null,newModule);
          }
          callback(null);
        },);
    });
  }
}

但它上升了

callback is not a function
TypeError: callback is not a function
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/util/AsyncQueue.js:352:5
    at Hook.eval [as callAsync] (eval at create (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/tapable/lib/HookCodeFactory.js:33:10),<anonymous>:6:1)
    at AsyncQueue._handleResult (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/util/AsyncQueue.js:322:21)
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/util/AsyncQueue.js:305:11
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/Compilation.js:1780:5
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/normalModuleFactory.js:761:5
    at eval (eval at create (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/tapable/lib/HookCodeFactory.js:33:10),<anonymous>:13:1)
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/normalModuleFactory.js:322:16
    at Hook.eval [as callAsync] (eval at create (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/tapable/lib/HookCodeFactory.js:33:10),<anonymous>:6:1)
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/normalModuleFactory.js:304:31
    at Hook.eval [as callAsync] (eval at create (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/tapable/lib/HookCodeFactory.js:33:10),<anonymous>:6:1)
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/webpack/lib/normalModuleFactory.js:288:30
    at eval (eval at create (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/tapable/lib/HookCodeFactory.js:33:10),<anonymous>:16:1)
    at /Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/webpack.plugins.js:39:11
    at _next0 (eval at create (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/tapable/lib/HookCodeFactory.js:33:10),<anonymous>:8:1)
    at eval (eval at create (/Users/linonetwo/Desktop/repo/TiddlyGit-Desktop/node_modules/tapable/lib/HookCodeFactory.js:33:10),<anonymous>:30:1)

那么有人知道如何使用插件正确地将某个模块声明为外部模块吗？

解决方法

这是答案：

const ModuleFilenameHelpers = require('webpack/lib/ModuleFilenameHelpers');
const ExternalModule = require('webpack/lib/ExternalModule');

class ExternalsPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    const options = this.options;
    compiler.hooks.normalModuleFactory.tap('ExternalsPlugin',function (nmf) {
      nmf.hooks.resolve.tapAsync(
        {
          name: 'NormalModuleFactory',stage: 100,},function (module,callback) {
          if (ModuleFilenameHelpers.matchObject(options,module.createData.resource)) {
            const { context,dependencies } = module;
            const newModule = new ExternalModule(module.request,options.type || compiler.options.output.libraryTarget,module.createData.userRequest);
            callback(null,newModule);
          } else {
            callback(null);
          }
        },);
    });
  }
}

我忘记在第二个 callback(null) 左右添加 else

 else {
            callback(null);
          }

所以回调调用两次，第二次抛出错误。