Названия чанков в Webpack с помощью Laravel Mix - PullRequest
Новая
       18

Названия чанков в Webpack с помощью Laravel Mix

12 голосов
/ 14 мая 2019

Я хочу использовать кусочки Webpack с Laravel Mix.На данный момент выводится этот список: 

                                               Asset      Size        Chunks             Chunk Names
                                     /entry-point.js  3.37 MiB  /entry-point  [emitted]  /entry-point
                                                0.js  57.9 KiB             0  [emitted]  
                                                1.js  20.7 KiB             1  [emitted]  
                                               10.js  24.2 KiB            10  [emitted]  
                                               11.js  17.8 KiB            11  [emitted]  
                                               12.js  17.3 KiB            12  [emitted]  
                                               13.js  20.3 KiB            13  [emitted]  
                                               14.js  34.3 KiB            14  [emitted]  
                                               15.js  16.3 KiB            15  [emitted]  
                                               16.js  16.3 KiB            16  [emitted]  
                                               17.js  18.8 KiB            17  [emitted]  
                                               18.js  9.34 KiB            18  [emitted]  
                                               19.js  18.2 KiB            19  [emitted]  
                                                2.js   487 KiB             2  [emitted]  
                                               20.js  18.2 KiB            20  [emitted]  
                                               21.js  17.2 KiB            21  [emitted]  
                                               22.js  13.3 KiB            22  [emitted]  
                                               23.js    54 KiB            23  [emitted]  
                                               24.js  53.8 KiB            24  [emitted]  
                                               25.js  17.9 KiB            25  [emitted]  
                                               26.js  23.6 KiB            26  [emitted]  
                                               27.js  29.4 KiB            27  [emitted]  
                                               28.js  29.4 KiB            28  [emitted]  
                                               29.js  19.5 KiB            29  [emitted]  
                                                3.js   128 KiB             3  [emitted]  
                                               30.js    17 KiB            30  [emitted]  
                                               31.js  13.1 KiB            31  [emitted]  
                                               32.js  33.4 KiB            32  [emitted]  
                                                4.js   104 KiB             4  [emitted]  
                                                5.js  70.1 KiB             5  [emitted]  
                                                6.js  82.9 KiB             6  [emitted]  
                                                7.js  89.1 KiB             7  [emitted]  
                                                8.js   959 KiB             8  [emitted]  
                                                9.js  38.1 KiB             9  [emitted]

Определение маршрута: 

export default [{
    path: '/user',
    component: Layout2,
    children: [
        {
            path: '/',
            name: 'user',
            component: () => /* webpackChunkName: "view-[request]" */ import('@/components/user'),
        },
    ]
}]

Конфигурация веб-пакета: 

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */
let mix = require('laravel-mix/src/index');

let ComponentFactory = require('laravel-mix/src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('laravel-mix/src/builder/WebpackConfig');

const config = new WebpackConfig().build();

// Inject sass-loader options
config.module.rules
.filter(rule => rule.test.test && (rule.test.test('.sass') || rule.test.test('.scss')))
.forEach(rule => {
    const sassLoader = rule.loaders.find(loader => loader.loader === 'sass-loader');

    if (sassLoader) {
        Object.assign(sassLoader.options, {
            precision: 5,
            implementation: require('node-sass')
        });
    }
});

// Fix Hot Module Replacement bug
if (Mix.isUsing('hmr')) {
    // Remove leading '/' from entry keys
    config.entry = Object.keys(config.entry)
    .reduce((entries, entry) => {
        entries[entry.replace(/^\//, '')] = config.entry[entry];
        return entries;
    }, {});

    // Remove leading '/' from ExtractTextPlugin instances
    config.plugins
    .forEach((plugin) => {
        if (plugin.constructor.name === 'ExtractTextPlugin') {
            plugin.filename = plugin.filename.replace(/^\//, '');
        }
    });
}



module.exports = config;

Теперь мне интересно, почему все файлыс именем 0.js и т. д., а не как webpackChunkName.

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

Мои вопросы:

  • Как правильно использовать WebpackChunkName?
  • Как я могу предотвратить кэшированиекусков?

1 Ответ

4 голосов
/ 17 мая 2019

Я предполагаю, что вы создаете приложение, которое использует маршрутизатор Vue из вашего вопроса.

1) Чтобы ответить на ваш первый Вопрос, всякий раз, когда вы импортируете свой компонент в определение вашего маршрута таким образом component: () => import('@/components/user'). вы просто указываете веб-пакету кодировать разделение пакета приложений на основе маршрутов в vue.

Это позволяет загружать ваш компонент маршрутов, тем самым уменьшая размер основного пакета, см. https://router.vuejs.org/guide/advanced/lazy-loading.html. Каждый файл x.js создается из импорта динамического компонента в вашем определении маршрута и автоматически / лениво загружается при необходимости. (Вы можете открыть консоль при переходе между различными маршрутами на вкладке xhr, вы увидите, как загружаются файлы.)

2) Для вашего второго вопроса, проверьте этот другой вопрос Как я могу заставить Webpack использовать суффикс очистки кэша?

UPDATE: Вы также можете использовать HtmlWebpackPlugin, он имеет атрибут hash (логическое значение), который автоматически добавляет уникальный хэш компиляции веб-пакета ко всем включенным сценариям и файлам CSS. Однако это включает в себя только CSS и JS. Вам может понадобиться хешировать и другие ресурсы.

Надеюсь, это поможет:)

...