Webpack splitChunks, как получить чанк для каждого пакета npm (чанк должен включать зависимости для каждого пакета) - PullRequest
Новая
       109

Webpack splitChunks, как получить чанк для каждого пакета npm (чанк должен включать зависимости для каждого пакета)

1 голос
/ 17 февраля 2020

Я хочу разделить свои фрагменты с помощью 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

enter image description here

В идеале, я также хотел бы иметь commons или shared кусок, чтобы избежать возможных модулей, которые требуются более чем одному модулю.

Кто-нибудь знает, как это сделать?

...