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

发布时间：2020-12-15 05:07:59 所属栏目：百科来源：网络整理

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

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

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

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

我认为你应该能够使用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 Config中的引用,它捆绑了我的所有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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!