webpack 4 - плагин для разделения фрагментов для нескольких записей

Использование плагина split chunks со следующей конфигурацией:

{
    entry: {
        entry1: [entry1.js],
        entry2: [entry2.js],
        entry3: [entry3.js],
        ...
    }
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    } 
}

Код будет идеально разделен на:

vendors-entry1-entry2-entry3.js // common for all
vendors-entry1-entry3.js // vendors only required by both entry1, entry3
entry1-entry2.js // common code of entry1 and entry2
entry1.js // unique entry code
entry2.js
entry3.js

Вопрос в том, как теперь я использую конкретных поставщиков для каждой записи в моем html (или ejs в моем конкретном случае)?

Используя HtmlWebpackPlugin в соответствии с рекомендациями, просто создайте index.html, который загружает все вышеперечисленное, хотя пример использования явно:

При рендеринге entry1 page - load:

vendors-entry1-entry2-entry3.js
vendors-entry1-entry3.js
entry1-entry2.js
entry1.js

При рендеринге entry2 page - load:

vendors-entry1-entry2-entry3.js
entry1-entry2.js
entry2.js

так далее..

Ответ 1

Версия 4 HtmlWebpackPlugin (которая на данный момент является альфа-версией) автоматически включает в себя созданные сгенерированные фрагменты записей. Так что настройка chunks: 'entry1' должна работать:

new HtmlWebpackPlugin({
    template: 'entry1.ejs',
    filename: 'entry1.html',
    chunks: ['entry1']
}),

... и приводит к внедрению всех зависимых блоков в html файл:

<script src="/vendors-entry1-entry2-entry3.js">
<script src="/vendors-entry1-entry3.js">
<script src="/entry1-entry2.js">
<script src="/entry1.js">

Вы можете установить его с помощью

npm install --save-dev [email protected]

Ответ 2

У меня есть аналогичная проблема, и у меня был небольшой успех, используя конфигурационную настройку, которую я нашел здесь. Не уверен, что это применимо к вашему конкретному варианту использования, но я думал, что поделюсь.

Хэш оптимизации в конфигурации webpack выглядит так:

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2,
                    minSize: 0
                }
            }
        },
        occurrenceOrder: true
    },

Таким образом, используя эти точки входа:

    entry: {
        app: './src/app.js',
        home: './src/home.js',
        product: './src/product.js'
    }

И это как моя установка HtmlWebpackPlugin:

    // base template common to all pages
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/base.html.j2',
        filename: '${templates}/base.html.j2',
        chunks: ['commons', 'app']
    }),

    // JUST the homepage
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/index.html.j2',
        filename: '${templates}/index.html.j2',
        chunks: ['home']
    }),

    // JUST the product template
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/product.html.j2',
        filename: '${templates}/product.html.j2',
        chunks: ['product']
    }),

Я успешно получаю куски "commons" и "app", добавленные ко всем страницам, и на домашней странице добавляется "домашний" фрагмент (только), а на странице продукта добавляется "товарный" кусок (только). Вот пример источника "домашней" страницы:

    <body>
        ...
        <script type="text/javascript" src="/static/commons.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/app.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/home.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
    </body>

Я не знаю, можно ли разделить модули поставщика с помощью этой настройки. Я предполагаю, что это возможно, но если это так, секретная эскалация веб-пакетов хранит эту информацию хорошо охраняемой: P

Но, учитывая, что он уже разбивает код на несколько очень маленьких кусков, я не уверен, что это необходимо (для меня, во всяком случае).