分块时非常大的文件名

Question

我正在使用 webpack/laravel-mix 来捆绑我的 JS 组件。

webpack.mix.js

const {EnvironmentPlugin} = require ('webpack');
const mix = require ('laravel-mix');
const glob = require ('glob');
const path = require ('path');
const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
const ChunkRenamePlugin = require ('webpack-chunk-rename-plugin');

require ('laravel-mix-tailwind');
require('laravel-mix-brotli');

mix.webpackConfig ({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    },
    plugins: [
        new CleanWebpackPlugin ({
            cleanOnceBeforeBuildPatterns: ['js/chunks/**/*']
        }),
        new EnvironmentPlugin ({
            BASE_URL: '/'
        }),
        new ChunkRenamePlugin ({
            initialChunksWithEntry: true,
            '/js/app': 'js/entry-point.js',
            '/js/vendor': 'js/vendor.js',
        }),
    ],
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.join (__dirname, 'resources'),
            'node_modules': path.join (__dirname, 'node_modules')
        }
    },
});

mix.js ('resources/js/entry-point.js', 'public/js')
.postCss ('resources/css/app.css', 'public/css')
.tailwind ('./tailwind.config.js')
.brotli();

if (mix.inProduction ()) {
    mix
    .version ();
}

这很好用。但是有一件事情让我很困扰：

如果我在多个视图中重用下拉按钮等 Vue 组件，文件名如下所示：

组件，用于

• foo.edit
• foo.index
• field.edit
• field.index
• field.view
• bar.edit
• bar.index
• bar.view

正在返回此文件名：

js/chunks/foo-edit~foo-index~field-edit~field-index~field-view~bar-edit~bar-index~bar-view~pro~07fab756.61fe59df34cc4cf440ce.js

我的问题：

1. 是什么导致了这种效果？我试图理解文档，但不明白为什么 [name] 这么大
2. 如何防止这种行为并在共享组件上强制使用短块名称？

Answer 1

是的，您可以将 [name].[chunkhash] 更改为 [contenthash:5] 以减少捆绑文件名并保持长期缓存。