为什么webpack在生产模式下会忽略chunk？

Question

我有多个入口点共享相同的代码。我需要使用Webpack 4中的splitCode将此代码提取到一个文件中。在development模式下，这可以正常工作，但在production模式下却不行。

配置文件：

var path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {

                    loader: 'babel-loader',
                }
            },
            {
                test: /\.(sass|scss|css)$/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ],
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'js/[name]-[chunkhash].js',
        chunkFilename: 'js/[name]-[chunkhash].js',
        publicPath: '/'
    },
    externals: {
        jquery: "jQuery"
    },
    optimization: {
        runtimeChunk: "single",
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all",
                    priority: 1
                },
                utilities: {
                    test: /\.s?js$/,
                    minChunks: 2,
                    name: "utilities",
                    chunks: "all",
                    priority: 0
                }
            }
        }
    },
    context: path.join(__dirname, 'resources/assets'),
    entry: {
        a: './js/a.js',
        b: './js/b.js'
    },
    plugins: [
        new CleanWebpackPlugin(['public/js/*.*', 'public/css/*.*'], {} ),

        new MiniCssExtractPlugin({
            filename: "css/[name]-[contenthash].css"
        }),

        new WebpackMd5Hash(),

        new ManifestPlugin({
            fileName: 'manifest.json'
        }),
    ]
};

在开发模式下，Webpack会创建两个入口点，一个是runtime.js，另外两个是vendor.js和utilities.js，这是可以的。

当我将模式从development更改为production时，Webpack会忽略utilities缓存组，并将公共代码库附加到这两个入口点中。

我错过了什么吗？

Webpack版本：4.28.4 Node版本：8.15

- Bald

Answer 1

似乎将enforce设置为true可以达到目的（但我不太确定原因）。

应该像这样：

utilities: {
    test: /\.s?js$/,
    minChunks: 2,
    name: "utilities",
    chunks: "all",
    priority: 0,
    enforce: true
}

从现在开始，utilities.js不仅在开发模式下创建，也在生产模式下创建。

- Bald

Answer 2

这不是一个错误，而是一项功能

在生产模式下，如果新的代码块大小小于30KB，则Webpack 4会忽略splitchunks.cacheGroups。

如何覆盖默认条件：

如果想要确保创建这些代码块，请使用splitchunks.cacheGroups.runtime.enforce: true。

请查看文档https://webpack.js.org/plugins/split-chunks-plugin/#defaults以了解更多详细信息。

- Jake

Answer 3

指定 minChunks: 2 意味着只有在至少在2个模块中指定了给定的共同导入时，才会创建分割包。你可能想要验证一下，但将其降到1。

这里列出了几个额外的默认规则：https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#defaults ，但主要是如果公共代码库不大于30kb（在 min+gz之前），那么它不会被拆分。您可以通过更新键minSize来强制执行此操作，如在默认优化配置中所述。

- BisonAVC

Answer 4

Webpack的SplitChunksPlugin插件，由默认设置，会忽略任何小于30kb的块。如果你在开发模式下运行Webpack，你可以看到utilities.js的捆绑大小，并通过将optimization.splitChunks.minSize选项设置为小于utilities.js的大小来强制拆分。

- S. Esteves