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

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块以避免多个模块需要可能的模块。

有人知道该怎么做吗？