Создать имя splitChunks на основе точки входа - PullRequest
Новая
       7

Создать имя splitChunks на основе точки входа

0 голосов
/ 14 декабря 2018

У меня есть следующая (сокращенная) конфигурация веб-пакета: 

module.exports = {
    entry: {
        app: "./app/index.ts",
        admin: "./app/index-admin.ts"
    },
    ...,
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    }
}

В результате получается 3 файла:

  • app.min.js
  • admin.min.js
  • vendors.min.js

Моя проблема заключается в том, что vendors.min.js генерируется один раз для обеих точек входа.Идея этой конфигурации заключается в том, что обе точки входа будут совершенно одинаковыми, но в «index-admin.ts» я буду ссылаться на дополнительную библиотеку, например tinyMce или что-то в этом роде.

Поэтому я бы хотелсоздано 4 файла:

  • app.min.js
  • admin.min.js
  • app.vendors.min.js
  • admin.vendors.min.js

Возможно ли это?

1 Ответ

0 голосов
/ 14 декабря 2018

Предположим, у нас есть два файла:

index.js 

import 'jquery';

index-admin.js 

import 'jquery';
import 'lodash';

Например, мы хотим использовать lodash только для административной части и отделить его от основного приложения.Вот возможное решение: 

module.exports = {
    entry: {
        app: "./app/index.js",
        admin: "./app/index-admin.js",
    },
    optimization: {            
        splitChunks: {
            chunks: 'all', // enable default cache groups, also this value will be inherited by the child groups
            cacheGroups: {
                // vendors is a default group, here we're overriding its configuration
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors.common",
                    // when you define your own group, its priority is 0, so you need to reset it to the default (or simply a negative) value for vendors
                    priority: -10
                },
                vendorsAdmin: {
                    // could be replaced with a function for the more complex scenario `function (module, chunk)`
                    test: /[\\/]lodash[\\/]/,
                    name: "vendors.admin",
                    // disable minSize/maxSize/minChunks/maxAsyncRequests/maxInitialRequests policies for this group
                    enforce: true,
                }
            }
        }
    }
};

В результате мы получаем следующую файловую структуру:

  • app.js
  • admin.js
  • vendors.admin.js (только lodash * )
  • vendors.common.js (только jquery )

Так просто, кактот.Но это решение может привести к странному поведению позже.Например, кто-то из вашей команды ссылается на lodash из пакета приложений.Структура пакета не изменится после сборки, но теперь app.js зависит от vendors.admin.js.Таким образом, когда webpack manifest попытается загрузить ваше приложение, он начнет ждать загрузки vendors.admin.js, но этого никогда не произойдет.

Самое надежное и простое решение - динамический импорт , и я настоятельно рекомендую рассмотреть его вместо этого решения.Вы получите намного больший контроль над своими зависимостями и сможете еще более детально разделить код.

Если вы не хотите самостоятельно управлять процессом связывания, похоже, вы можете положиться на значение по умолчанию.стратегия расщепления.Он выдаст тот же результат для моего примера, что и в предыдущем конфиге. 

optimization: {
    splitChunks: {            
        chunks: 'all'            
    }
}
...