使用 Laravel Mix 的 Webpack 块名称

Question

我想在 Laravel Mix 中使用 Webpack 块。目前这个列表被输出：

                                               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？
• 如何防止缓存块？

Answer 1

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

就我个人而言，我觉得这很烦人，尤其是对于大型项目，因为您最终可能会得到数百个 .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 更改为您喜欢的名称。

Answer 2

我假设您正在构建一个使用 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。您可能还需要散列其他资源。

希望对你有帮助:)