webpack - Webpack 5 splitChunks 配置

Question

我想将 testD 文件导出到 2 个单独的文件中。一个文件被立即调用，另一个文件被称为异步。

从我的 webpack 配置中，我的设置允许将 testD 拆分为 2 个文件。

但从下图中我看到 asyncVendors 配置被覆盖。Lodash 异步文件不应该有 asyncVendors 名称而不是 asyncCommon 名称？

网络包配置

const baseConfig = {
  mode: "development",
  context: path.resolve("./src"),

  entry: {
    testA: { import: path.resolve("./src/testA.js") },
    testB: { import: path.resolve("./src/testB.js") },
  },
  devtool: "source-map",
  target: "web",
  output: {
    path: path.resolve("dist"),
    publicPath: "/dist/",
    clean: true,
    environment: {
      arrowFunction: false,
    },
  },
  optimization: {
    minimize: false,
    splitChunks: {
      chunks: "initial",
      minSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          minSize: 30000,
          maxSize: 200000,
        },
        asyncVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "asyncVendors",
          chunks: "async",
          minSize: 30000,
          maxSize: 200000,
        },
        asyncCommon: {
          name: "asyncCommon",
          chunks: "async",
          maxSize: 900,
        },
      },
    },
    runtimeChunk: "single",
  },
}

测试A.js

import("lodash");
import("./testD.js");

console.log(square);

export default function () {}

testB.js

import { square } from "./testD.js";
import _ from "lodash";

console.log(circle, square);

testD.js

export function square() {
  console.log("hello");
}

export function circle() {
  console.log("hello");
}