webpack 4 - плагин с разделенными чанками для нескольких записей - PullRequest
Новая
       12

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

0 голосов
/ 08 мая 2018

Используя плагин 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's code
entry2.js
entry3.js

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

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

При рендеринге entry1 page - загрузка: 

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

При рендеринге entry2 page - загрузка: 

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

и т.д ..

Ответы [ 2 ]

0 голосов
/ 22 июля 2018

Версия 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 html-webpack-plugin@next
0 голосов
/ 19 июня 2018

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

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

    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" на все страницы, а на главной странице добавляется "home" (только), а на странице продукта - "product" (только) добавлено. Вот пример источника «домашней» страницы: 

    <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

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

...