Webpack4 output filename and chunkFileName action

according to the description on the official website, chunkFileName is used to name the package file that does not appear in the entry file in the output configuration, and filename is used to name the package file name corresponding to the entry file, but the results do not correspond to each other during the test. Why? The webpack configuration is as follows:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
    entry: {
        "index1": "./src/index1.js",
        "index2": "./src/index2.js",
        "index3": "./src/index3.js"
    },
    output: {
        filename: "[name].asd.js",
        chunkFilename: "[name].[contenthash].js",
        path: path.resolve(__dirname, "distribution")
    },
    //use inline-source-map for development:
    devtool: "inline-source-map",

    //use source-map for production:
    // devtool: "source-map",
    devServer: {
        contentBase: "./distribution"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                include: [path.resolve(__dirname, "src")],
                exclude: [path.resolve(__dirname, "node_modules")]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(["distribution"]),
        new BundleAnalyzerPlugin({
            openAnalyzer: false,
            analyzerMode: "static",
            reportFilename: "bundle-analyzer-report.html"
        }),
        new HtmlWebpackPlugin({
            template: "./src/index1.html",
            filename: "index1.html",
            chunks: ["index1", "manifest", "vendor", "common"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/index2.html",
            filename: "index2.html",
            chunks: ["index2", "manifest", "vendor", "common"]

        }),
        new HtmlWebpackPlugin({
            template: "./src/index3.html",
            filename: "index3.html",
            chunks: ["index3", "manifest", "vendor", "common"]

        }),
        new webpack.HashedModuleIdsPlugin()

    ],
    // optimization: {
    //     runtimeChunk: {
    //         "name": "manifest"
    //     },
    //     splitChunks: {
    //         cacheGroups: {
    //             default: false,
    //             vendors: false,
    //             vendor: {
    //                 test: /[\\/]node_modules[\\/]/,
    //                 chunks: "initial",
    //                 enforce: true,
    //                 priority: 10,
    //                 name: "vendor"
    //             },
    //             common: {
    //                 chunks: "all",
    //                 minChunks: 2,
    //                 name: "common",
    //                 enforce: true,
    //                 priority: 5
    //             }
    //         }
    //     }
    // }
    optimization: {
        runtimeChunk: {
            "name": "manifest"
        },
        splitChunks: {
            chunks: "all",
            minSize: 0,
            cacheGroups: {
                default: false,
                vendors: false,
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial",
                    enforce: true,
                    priority: 10,
                    name: "vendor"
                },
                common: {
                    chunks: "all",
                    minChunks: 2,
                    name: "common",
                    enforce: true,
                    priority: 5
                }
            },
        }
    }

};

the result is shown in figure

clipboard.png
as far as I understand it, the filename of output in configuration is [name] .asd.js. In theory, the packaged index1.js,index2.js, index3.js should correspond to this index1.asd.js, index2.asd.js, index3.asd.js, and other js files are hashed. Instead, the manifest chunk that is not in the entry file is named according to filename format. Answer

Dec.28,2021

because you use inline-source-map, the three js are all packaged into a file, and the naming format of out


is later google. This problem is mainly caused when optimization.runtimeChunk is configured. It can be understood that after runtimeChunk is configured, the entry file is the chunk, specified by runtimeChunk, while other chunk is not considered portal chunk. If removed, Then the entry chunk, configured in input is affected by filename naming, and the asynchronously introduced chunk is affected by chunkFilename

Menu