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

Question

我有几个"单页应用程序"需要在一个单一的总体应用程序中并行运行.为此,我使用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

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

我也更喜欢自动完成这项工作 - webpack应该能够扫描我的入口点,检测哪些第三方库(可能通过引用节点模块？)正在导入,并且只包括供应商文件中的那些那个应用程序 我不希望有第三方依赖添加到一个数组在我的WebPack的配置和 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

基础.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')
  }
};

构建.sh

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

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