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

Question

对于上下文：我在后端使用 Symfony 开发自己的产品，在前端使用 react/react-router，它们由 Webpack 捆绑在一起。我打算将我的应用程序分成 "extensions"，所以我会有 "core" 捆绑包和围绕它的多个不同的扩展捆绑包（这将是我的产品的附加功能集）。

现在，我希望我的前端与我的后端一样可扩展。我希望能够将带有扩展包的新 React 组件添加到 "CoreBundle".

中现有的 "core" 组件集

然而，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/

在我的例子中，我使用它将所有供应商库（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 包中的要求引用 dll。

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

Plugin system for apps compiled using Webpack

plugins

symfony

reactjs

webpack

react-router-v4