reactjs - 使用 Webpack 编译的应用程序的插件系统

Question

对于上下文:我正在开发自己的产品，在后端使用 Symfony，在前端使用 React/React-router，它们通过 Webpack 捆绑在一起。我计划将我的应用程序划分为“扩展”，因此我将拥有“核心” bundle 和围绕它的多个不同的扩展 bundle (这将是我的产品的附加功能集)。

现在，我希望我的前端能够像后端一样可扩展。我希望能够将新的 React 组件与我的扩展包添加到“CoreBundle”中现有的“核心”组件集。

但是，Webpack 似乎将所有内容封装得太紧密，无法生成这种插件系统。是否有可能拥有多个具有单独 Webpack 配置的包，但它们的 JavaScript 将以允许开发插件系统的方式互连？目标是能够独立开发一个Bundle的JS，同时能够使用另一个Bundle中一些已经编译好的JS资源。

Answer 1

我认为您应该能够使用 DllPlugin 和 DllReferencePlugin 来实现此目的

The DllPlugin is used in a separate webpack config to create a dll only bundle. It also creates a manifest.json file which is used by the DllReferencePlugin to map dependencies.

请参阅详细文档

https://webpack.js.org/plugins/dll-plugin/

就我而言，我使用它来将所有 vendor 库(React、Flux 等)合并到一个构建中，然后将其用作我的其他 Webpack 配置中的引用，该配置捆绑了我的所有 React 组件等，但引用了 React 和其他组件使用 DllReferencePlugin 的库。

我的 webpack.dll.js 配置文件:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: {
    libs: [path.join(__dirname, "common", "lib.js")]
  },
  output: {
    path: path.join(__dirname, "dist", "dll"),
    filename: "[name].dll.js",
    library: "[name]"
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "dll", "[name]-manifest.json"),
      name: "[name]",
      context: path.resolve(__dirname, "common")
    }),
  ]
};

然后在我的主 webpack.config.js 中，我使用引用插件。

 new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, "common"),
      manifest:require('./dll/libs-manifest.json')
    })

根据您想要如何拆分代码，您可以创建多个 Dll，每个 Dll 根据您的要求都有一个单独的 webpack 配置。然后根据您的要求在不同的其他 webpack bundle 中引用 dll。