webpack 分包，如何把模块和依赖打包在一起

Question

问题出现的环境背景

Webpack v5

问题描述

主入口 index.js 引用 components 目录下的 a 模块和 b 模块，a 模块中引用 c 模块，index.js 中并未直接引用 c 模块。

想要把 components 目录下用到的模块以及它们的依赖打包在一起。

相关代码

// webpack.config.js
const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist")
  },
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]components[\\/]/,
          name: "vendors",
          chunks: "all",
          priority: 10,
          enforce: true,
          reuseExistingChunk: true
        }
      }
    }
  },
  plugins: [
    new BundleAnalyzerPlugin({
      openAnalyzer: false
    })
  ]
};

得到的结果，c 模块进了主 bundle

Project Code：https://codesandbox.io/s/sill...
Preview：https://k6gew.sse.codesandbox...

你期待的结果是什么？实际看到的错误信息又是什么？

期望 c 模块优先和自定义模块打包在一起，能怎么实现呢？

Answer 1

因为c.js是直接在src下,vendor的判断条件不会匹配到c.js

可以通过修改test来匹配到c.js,从而让c.js也能打包进vendor中

module.exports = {
  // ...
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]components[\\/]|[\\/]src[\\/]c\.js/,
          name: 'vendors',
          chunks: 'all',
          priority: 10,
          enforce: true,
          reuseExistingChunk: true,
        },
      },
    },
  },
  // ...
}