为什么 webpack 在生产模式下会忽略块？答案

【问题标题】：Why does webpack ignore chunk in production mode?为什么 webpack 在生产模式下会忽略块？
【发布时间】：2019-01-16 09:35:56
【问题描述】：

我有多个共享相同代码的入口点。我需要做的是在 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 cacheGroups 并将公共代码库附加到两个入口点。

我错过了什么？

Webpack 版本：4.28.4 节点版本：8.15

【问题讨论】：

标签： javascript webpack webpack-4

【解决方案1】：

似乎将enforce 设置为true 就可以了（但我不完全确定为什么）。

应该是这样的：

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

从现在开始，utilities.js 不仅在开发模式中创建，而且在生产模式中创建。

【讨论】：

【解决方案2】：

这不是错误。这是一个功能

Webpack 4 splitchunks.cacheGroups 在生产模式下被忽略 IF 新块小于 30kb 的大小。

覆盖此默认条件的解决方案：

用户 splitchunks.cacheGroups.runtime.enforce: true 如果你真的想确保这些块被创建

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

【讨论】：

【解决方案3】：

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

这里列出了一些额外的默认规则：https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#defaults，但主要是如果公共代码库不大于 30kb（在 min+gz 之前），那么它不会被拆分。您可以通过更新 in the default optimization config 列出的密钥 in the default optimization config 来强制它。

【讨论】：

【解决方案4】：

Webpack SplitChunksPlugin，default，忽略任何小于 30kb 的块。如果您在开发模式下运行 Webpack，您将能够看到 utilities.js 的包大小并通过将 optimization.splitChunks.minSize 选项设置为小于 utilities.js 的大小来强制拆分。

【讨论】：