Javascript Webpack拆分块如何为每个npm包获取块（块应包括每个包的依赖项）

我想用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('@', '')}`;
        },
      },
    },
  },
}

现在，我将

样式化组件的每个依赖项作为一个不同的块。
例如：下面的3个包都是
样式化组件所必需的


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

有人知道怎么做吗