添加其他插件的webpack插件

Question

我正在尝试创建一个充当插件包装器的插件，加载配置、文件等，并添加更多插件到当前的webpack编译过程中。

在

apply

函数中，我创建插件，然后将它们应用于原始编译器，如下所示：

apply(compiler) {
  const plugins = [
    new HtmlWebpackPlugin(options1),
    new HtmlWebpackPlugin(options2),
    ...
  ];

  plugins.forEach((plugin) => {
    plugin.apply(compiler);
  });
});

我的插件没有向 webpack 编译器添加任何钩子，但让其他插件添加它们。当容器项目使用 webpack 4 时它工作得很好...但是我在使用不同的 webpack 版本时发现了一个错误。

其中一个 injected 插件是

html-webpack-plugin

，它是我的插件的依赖项：

package.json

"dependencies": {
  "copy-webpack-plugin": "^4.5.1",
  "html-webpack-plugin": "^3.2.0",
  "webpack-bundle-analyzer": "^2.11.3"
}

正如你所想象的，我注入了这 3 个插件的实例。

当使用我的插件的项目使用

webpack 3

时，问题就出现了，因为在某些时候，

html-webpack-plugin

内部需要位于

NodeTemplatePlugin

下的

html-webpack-plugin/node_modules/webpack

。据我了解，

html-webpack-plugin

有自己的

webpack

，即

webpack 4

。由于原始传递的

compiler

来自

webpack 3

，而

NodeTemplatePlugin

中预期的是

webpack 4

，当最新尝试访问

compiler.hooks.thisCompilation

时，我会收到错误，因为它在

webpack 3 的编译器中不存在

.

有趣的是，在我的包中，json webpack 被定义为

peerDependency

（与

html-webpack-plugin

相同），因此它不应该安装在我的插件的

node_modules

下。

"peerDependencies": {
  "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
},

知道为什么会发生这种情况，或者知道如何从另一个插件注入插件吗？

如果您需要更多上下文/代码，可以在这里查看：
https://github.com/danikaze/generate-examples-index-webpack-plugin/blob/dev/src/ExamplesGenerator.js#L61

Answer 1

据我了解，您的目标是实现一个加载其他三个插件并且适用于 webpack 2.x、3.x 和 4.x 的插件。

在我看来，最简单、最安全的方法是维护三个版本 2.x、3.x、4.x 与每个相关的 webpack 版本相匹配。作为奖励，它将允许您指定所需的节点引擎，否则可能会破坏构建。

另一种方法是使用

packages 别名 

包含 html-webpack-plugin 的多个版本，并要求基于使用的 webpack 版本 进行匹配。例如，您可以根据 webpack env 系统从配置文件将 webpack 版本传递给插件构造函数：

在 package.json 中：

"build": "webpack --env.version $(webpack -v)"

在 webpack 配置中

module.exports = function(env) {
   return {
      // whatever config
      plugins: [
          new MyGreatBundlingPlugin({
              WEBPACK_VERSION: env.version,
              /*...other options*/
          })
      ]
   }
}

请注意，webpack 5 声明自身环境变量的方式略有不同。