Названия чанков в Webpack с миксом Laravel

Я хотел бы использовать куски 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'),
        },
    ]
}]

И это мой конфиг Webpack:

/**
 * 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 ответ


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

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

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

2) Для вашего второго вопроса, проверьте этот другой вопрос

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

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


Есть идеи?

10000