Question

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

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

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

我特别想要遇到我将一些大型（例如，JQuery）库导入到应用程序2中的情况，并将其包含在供应商包中以供其他不需要它的应用程序使用。我们的许多页面使用完全不同的前端堆栈，如果我在整个Web应用程序中使用单个vendor.js文件，我可以很快看到这种膨胀失控。

我也希望自动完成此操作 - webpack应该能够扫描我的入口点，检测哪些第三方库（可能通过引用节点模块？）正在导入，并且只包括那些在该应用程序的供应商文件中。我不想在我的入口点的webpack config 和 require()中将第三方依赖项添加到数组中。这似乎非常多余。

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

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

Answer 1

也许您可以将一个 webpack.config.js 用于每个应用，并将入口点设置为该应用。（即使他们共享相同的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

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

1 个答案: