javascript - Webpack splitChunks 如何为每个 npm 包获取一个块（该块应该包含每个包的依赖项）

Question

我想通过以下方式使用 Webpack 拆分我的块：

每当我导入一个 NPM 包时，比如

import styled from "styled-components";

我想要一个像这样的块：

styled-components.[contenthash:5].js  // INCLUDING ITS DEPENDENCIES

这是我正在使用的配置：

webpack.config.js

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

现在，我将每个依赖项都styled-components视为不同的块。例如：下面的 3 个包都是需要的styled-components

理想情况下，我还希望有一个commons或shared块来避免多个模块需要的可能模块。

有人知道怎么做吗？