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

Question

对于上下文:我正在使用后端的Symfony和前端的react/react-router开发我自己的产品,这是由Webpack捆绑在一起的.我打算将我的应用程序划分为"扩展",因此我将拥有"核心"捆绑包和多个不同的扩展捆绑包(这将是我的产品的附加功能集).

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

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

Answer 1

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

DllPlugin 在单独的 webpack 配置中用于创建仅 dll 的捆绑包。它还创建一个manifest.json 文件，DllReferencePlugin 使用该文件来映射依赖项。

请参阅以下位置的详细文档

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

就我而言，我使用它来将所有供应商库（React、Flux 等）合并到一个构建中，然后将其用作我的其他 Webpack 配置中的引用，该配置捆绑了我的所有 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 捆绑包中引用 dll。