Webpack chunk names with Laravel Mix

Question

I want to use Webpack chunks with Laravel Mix. At the moment this list is outputted:

                                               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]  

Route definition:

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

Webpack config:

/**
 * 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;

Now I am wondering why all the files are named 0.js etc. and not like the webpackChunkName.

Additionally, I'd like to use cache-busting on the chunks as my browser always caches them, so if I re-run Webpack, I often need to clear my cache completely.

My questions are:

• How can I make use of the WebpackChunkName correctly?
• How can I prevent caching of the chunks?

Answer 1

我假设您正在构建一个利用您问题中的 Vue 路由器的应用程序。

1）要回答您的第一个问题，每当您以这种方式在路由定义中导入组件时component: () => import('@/components/user')。你只是告诉 webpack 根据 vue 中的路由对你的应用程序包进行代码分割。

这允许您的路由组件延迟加载，从而减少主包大小，请参阅https://router.vuejs.org/guide/advanced/lazy-loading.html。每个 x.js 文件都是通过路由定义中的动态组件导入创建的，并在需要时自动/延迟加载。（您可以打开控制台，在 xhr 选项卡下的不同路线之间导航，您将在文件加载时看到。）

2）对于你的第二个问题，请检查另一个问题How Can I Make Webpack Use a Cache-Busting Suffix?

更新：您还可以使用 HtmlWebpackPlugin，它有一个属性哈希（布尔值），会自动将唯一的 webpack 编译哈希附加到所有包含的脚本和 css 文件中。但它只包含 css 和 js。您可能还需要对其他资源进行哈希处理。

希望能帮助到你 ：）

Answer 2

默认情况下，分块文件被编译到公用文件夹的根目录中。

就我个人而言，我觉得这很烦人，尤其是对于大型项目，因为您最终可能会得到数百个.js块文件。

我更喜欢将它们编译到特定的文件夹，我不需要以任何方式打开该文件夹。

您可以通过更改块路径来实现此目的，webpack.mix.js如下所示：

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js/main');

mix.webpackConfig({
    output: {
        filename:'js/main/[name].js',
        chunkFilename: 'js/chunks/[name].js',
    },
});

在刀片中，确保引用正确的文件，如下所示：

<script src="{{ mix('js/main/app.js') }}"></script>

请注意，您可以将文件夹的名称更改main为chunks您喜欢的名称。