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 cacheGroups并将公共代码库附加到两个入口点。

我想念什么？

Webpack版本：4.28.4 节点版本：8.15

Answer 1

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

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

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

用户splitchunks.cacheGroups.runtime.enforce: true，如果您确实要确保创建了这些块

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

Answer 2

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

此处列出了一些附加的默认规则：https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#defaults，但主要是如果公共代码库的大小不超过30kb（在min + gz之前），则不会被拆分。您可以通过更新列出的in the default optimization config键minSize来强制执行此操作。

Answer 3

将enforce设置为true似乎可以完成这项工作（但我不太确定为什么）。

应该是这样的：

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

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

Answer 4

由default创建的

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

为什么Webpack在生产模式下会忽略块？

4 个答案:

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

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