Предыстория

Ни для кого не секрет, что с выходом Webpack 4 стратегия разделения кода сильно поменялась. Тут даже лучше сказать, что она была заново придумана, т.к. старый подход просто перестал работать, а новый не понятно как использовать.

Для тех, кто все еще не в курсе, плагина webpack.optimize.CommonsChunkPlugin больше нет. Совсем. Вместо этого предлагается в конфиге писать следующее:

module.exports = {   // ...   optimization: {     splitChunks: {       chunks: "all"     }   }   // ... }

Это должно работать как магия. Т.е. теперь не мы говорим webpack’у что сделать общим чанком, а он сам все сделает, да еще может даже и лучше нас.

И наступит счастье. Шутка. На самом деле нет…

Базовые приготовления

Вот пример из документации:

module.exports = {   mode: 'development',   entry: {     index: './src/index.js',     another: './src/another-module.js'   },   output: {     filename: '[name].bundle.js',     path: path.resolve(__dirname, 'dist')   },   optimization: {     splitChunks: {       chunks: 'all'     }   } };

Результатом сборки будут 3 файла: another.bundle.js, index.bundle.js, vendors~another~index.bundle.js

Hash: ac2ac6042ebb4f20ee54 Version: webpack 4.7.0 Time: 316ms                           Asset      Size                 Chunks             Chunk Names               another.bundle.js  5.95 KiB                another  [emitted]  another                 index.bundle.js  5.89 KiB                  index  [emitted]  index vendors~another~index.bundle.js   547 KiB  vendors~another~index  [emitted]  vendors~another~index Entrypoint index = vendors~another~index.bundle.js index.bundle.js Entrypoint another = vendors~another~index.bundle.js another.bundle.js [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {vendors~another~index} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~another~index} [built] [./src/another-module.js] 88 bytes {another} [built] [./src/index.js] 86 bytes {index} [built]     + 1 hidden module

Теперь, для того, чтобы запустить наши веб приложения, мы, в одном случае, должны подключить vendors~another~index.bundle.js и index.bundle.js, а во втором vendors~another~index.bundle.js и another.bundle.js.

В чем проблема?

Проблема в имени vendors~another~index.bundle.js. Пока у нас меньше трех точек входа, ничего страшного не происходит. Здесь все кажется логичным — бандл содержит npm модули (они же vendors) и общие модули для index и another. На каждую из страниц мы подключаем 2 файла и не имеем проблем.

Однако если у нас три и более точки входа, то новых бандлов (они же чанки) может быть куда больше и мы уже не знаем ни их количества, ни имен. Все становится еще веселее, если мы еще и css извлекаем в отдельные файлы. И это проблема.

Как решить эту проблему?

После завершения работы webpack у нас нет никаких файлов, которые содержали бы в себе информацию о том, какие именно бандлы на той или иной странице надо подключать. И в какой последовательности.

Однако в output’е мы можем найти вот такие строки:

Entrypoint index = vendors~another~index.bundle.js index.bundle.js Entrypoint another = vendors~another~index.bundle.js another.bundle.js

На самом деле это почти то, что нам надо. Т.е. webpack прекрасно знает какие бандлы нужны для каждой точки входа, но почему-то сам не хочет этой информацией с нами делиться.

Манифест нам здесь не помогает. Да, мы знаем что такой (vendors~another~index.bundle.js) бандл есть. Мы знаем где он лежит. Но кому он нужен не знаем. Т.е. манифест бесполезен.

Тогда я решил что раз webpack знает нужную информацию, то ее возможно получится достать с помощью плагинов. Готовых я не нашел и решил написать свой. И, только ради демонстрации этого плагина, я и пишу эту статью.

import * as webpack from "webpack";  export interface IChunkDescription {     readonly id: string | number;     readonly name: string;     readonly files: string[]; }  export interface IEntrypointsPluginOptions {     readonly filename: string;     readonly replacer?: (key: string, value: any) => any;     readonly space?: string | number;     readonly filter?: (chunk: IChunkDescription) => boolean; }  export default class EntrypointsPlugin {     private readonly options: IEntrypointsPluginOptions;      public constructor(options: IEntrypointsPluginOptions) {         this.options = Object.assign<IEntrypointsPluginOptions, IEntrypointsPluginOptions>({             filename: "entrypoints.json",             replacer: null,             space: null,             filter: null         }, options);     }      public apply(compiler: webpack.Compiler): void {         compiler.hooks.emit.tap("entrypoints", (compilation: webpack.compilation.Compilation) => {             let data = {};             let entrypoints = {};              const filter = this.options.filter;             const publicPath = compilation.compiler.options.output.publicPath;              for (let [key, value] of compilation.entrypoints.entries()) {                 const chunks: IChunkDescription[] = value.chunks.map(data => {                     const chunk: IChunkDescription = {                         id: data.id,                         name: data.name,                         files: data.files                     };                     return filter == null || filter(chunk) ? chunk : null;                 });                  const files = ([] as string[]).concat(...chunks.filter(c => c != null)                   .map(c => c.files.map(f => publicPath + f)));                 const js = files.filter(f => /.js/.test(f) && !/.js.map/.test(f));                 const css = files.filter(f => /.css/.test(f) && !/.css.map/.test(f));                  let entrypoint = {};                 if (js.length) entrypoint["js"] = js;                 if (css.length) entrypoint["css"] = css;                  data[key] = entrypoint;             }             const json = JSON.stringify(data, this.options.replacer, this.options.space);             compilation.assets[this.options.filename] = {                 source: () => json,                 size: () => json.length             };         });     } }

В файле webpack.config.(ts|js) добавим новый плагин:

plugins: [   new EntrypointsPlugin({     filename: "entrypoints.json",     space: 2   }) ]

и дождемся результата. Результатом будет файл entrypoints.json с вот таким содержанием:

{   "index": {     "js": ["vendors~another~index.bundle.js", "index.bundle.js"]   },   "another": {     "js": ["vendors~another~index.bundle.js", "another.bundle.js"]   } }

Если используется extract-css, то кроме секции js будет еще и css.

Последнее, что нам остается, при формировании HTML страницы, это прочитать файл entrypoints.json, найти нужную точку входа, подключить js и css файлы из соответствующих списков.

Проблема решена

Как-то так.