Webpack中具有多个供应商包的多个入口点-Java 学习之路

我有几个“单页应用程序”需要在一个单一的总体应用程序中并行运行 . 为此，我使用webpack来触发jsx和scss的转换，捆绑生成的css和js，并拆分由我们编写的应用程序代码和来自第三方源的应用程序代码 .

不幸的是，似乎webpack对于如何捆绑供应商文件非常自以为是 - 它希望为我的所有入口点创建一个大型供应商捆绑包，而不是像这样更合理的分割：

- app1
    - app1.bundle.js
    - app1.vendor.bundle.js
    - app1.bundle.css
- app2
    - app2.bundle.js
    - app2.vendor.bundle.js
    - app2.bundle.css

我特别不需要它 . 我们的许多页面使用完全不同的前端堆栈，如果我在整个Web应用程序中使用单个 vendor.js 文件，我可以很快看到这种膨胀失控 .

我想要在我的webpack配置中将第三方依赖项添加到数组中，并在我的入口点中添加 require() . 这似乎非常多余 .

我很好 app1.vendor.bundle.js 和 app2.vendor.bundle.js 有重叠（即，如果它们都导入React，它们都可以在它们各自的包中包含该代码） . 我认为这比管理在我网站上运行的某些应用程序子集之间共享的常见文件更容易管理 .

有没有办法在webpack中实际执行此操作，或者我是否必须编写某种自定义解决方案来包装它来执行此操作？我见过的所有例子都有人为他们的整个应用程序编译一个总体供应商包 .

1 回答

也许你可以使用一个 webpack.config.js 表示 each app ，并将入口点设置为该应用程序 . （即使他们共享相同的 node_modules ）

像这样：

config/
  base.webpack.config.js
  app1.webpack.config.js
  app2.webpack.config.js
  ...
build.sh

base.webpack.config.js

// your main webpack config with `splitChunks` config etc.
module.exports = {
  ...
  optimization: {
    splitChunks: {
      minChunks: ...,
      cacheGroups: {
        vendors: { ... }
      }
    }
  }
};

app1.webpack.config.js

// config for app1
const baseConfig = require('./base.webpack.config');

module.exports = {
  ...baseConfig,
  entry: {
    app: '../src/app1.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '..', 'dist/app1')
  }
};

build.sh

#!/bin/sh
# build app1
webpack --config config/app1.webpack.config.js

# build app2
webpack --config config/app2.webpack.config.js

回复于 2024-04-28T07:35:59+08:00

Webpack中具有多个供应商包的多个入口点

1 回答

相关问题