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 並將其包含在供應商捆綁包中以供其他不需要它的應用程序使用的情況。 我們的許多頁面使用完全不同的前端堆棧，如果我為整個 web 應用程序使用單個vendor.js文件，我會很快看到這種膨脹失控。

我也希望自動完成這項工作 - webpack 應該能夠掃描我的入口點，檢測正在導入哪些第三方庫（可能通過引用節點模塊？），並且只將那些包含在供應商文件中那個應用程序。 我不想將第三方依賴項添加到我的 webpack 配置中的數組中，並在我的入口點中require()它們。 這似乎很多余。

我app1.vendor.bundle.js和app2.vendor.bundle.js有重疊（即，如果它們都導入 React，它們都可以在各自的包中包含該代碼）。 我認為這比處理在我網站上運行的某些應用程序子集之間共享的公共文件更容易管理。

有沒有辦法在 webpack 中單獨執行此操作，或者我是否必須編寫某種圍繞它的自定義解決方案來執行此操作？ 我見過的所有示例都讓人們為他們的整個應用程序編譯一個單一的總體供應商包。

Answer 1

值得注意的是 webpack 支持一系列配置。 在那種情況下，你會寫這樣的東西：

webpack.config.js

module.exports = [
  {...}, // Your first config
  {...}, // Your second config
]

使用這種方法，您可以為每頁編寫一個配置。

要生成條目 HTML，您可以使用html-webpack-plugin或mini-html-webpack-plugin 之類的東西。

如果您以其他方式將捆綁包注入 HTML，那么提取清單（ webpack-manifest-plugin 、 webpack-assets-manifest ）會很有用。 這為您提供了一個 JSON，然后您可以使用它在您的主機環境中注入您需要的 HTML。

Answer 2

也許你可以為每個應用程序使用一個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

Answer 3

我可能有你要找的東西（基於 webpack 5）...

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // minifies your CSS
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        'app1': './src/app1.js',
        'app2': './src/app2.js'
    },
    output: {
        filename: '[name].bundle.[contenthash].js', // <-- NAME WILL MATCH YOUR ENTRY POINTS, contenthash generates a hash to prevent any  caching on an updated version of your file
        path: path.resolve(__dirname, './dist'),
        publicPath: ''
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].bundle.[contenthash].css' // <-- SAME HERE FOR CSS
        }),
        new CleanWebpackPlugin() <-- clean the /dist folder, avoid ending up with X versions of your files because of a new hashed version generated with the use of [contenthash] in your filenames
    ]
};
```