Webpack: поместите каждый внешний пакет в отдельный блок - PullRequest
Новая
       6

Webpack: поместите каждый внешний пакет в отдельный блок

0 голосов
/ 30 сентября 2018

В настоящее время я экспериментирую с разбиением кода в Webback4.

Я бы хотел поместить каждый внешний пакет (из node_modules) в его собственный чанк.Может кто-нибудь дать мне подсказку, как это сделать?

Это то, как далеко я продвинулся (кроме webpack.config.js) 

  optimization: {
    runtimeChunk: {
      name: "runtime"
    },
    splitChunks: {
      chunks: "all",
      name(module) {
        return module.resource && module.resource.replace(/\//g, "_");
      }
    }
  }

Но теперь каждый JSФайл представляет собой отдельный кусок.Итак, я хотел бы сделать это для каждого пакета.

В идеале имя файла должно иметь форму: 

<package-name>-<version>.js

, например: 

protobufjs-6.1.3.js

Помощь?

Бонус: могу ли я также как-то сгенерировать хеш контента для имени файла?

1 Ответ

0 голосов
/ 02 октября 2018

Основной ответ

Используйте папку node_modules для проверки каждого импортированного модуля и поместите его в свой собственный файл: 

optimization: {
    // runtimeChunk: 'single',
    splitChunks: {
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                enforce: true,
                chunks: 'all'
            }
        }
    }
}

Бонус-раунд

Выходное имя файла Webpackпринимает функцию для настройки.

Я попробую продемонстрировать концепцию;Давайте создадим имя файла, как вы просили: [name]-[version]-[contenthash].js

const pkgJson = require('./package.json');
const namesVersionsObject = pkgJson.dependencies.forEach(...);

output: {
  filename: (chunkData) => {
    return `[${chunkData.chunk.name}]-[${namesVersionsObject[chunkData.chunk.name]}]-[contenthash]`
  },
}

Не копируйте и не вставляйте этот код, он не будет работать.Это просто POC о том, как генерировать пользовательский вывод имени файла.Вы должны построить объект из пакета JSON, который выглядит как {name: version}: 

{
    "react": "16.5.0"
    ...
}

В качестве альтернативы, вы можете использовать что-то вроде webpack-version-file-plugin для генерации файла JSON, которыйиметь {name: version} в своем выводе и использовать этот файл в качестве ссылки namesVersionsObject

...