Webpack打包时CSS文件名被随机生成，如何保留原文件名？

我使用Webpack打包JS和CSS文件，在JS文件中引入CSS（示例代码如下），功能正常且CSS已应用到页面，但查看打包产物时发现生成了带随机数的额外JS文件，对应的CSS文件名也带有该随机数。我希望保留CSS原文件名（如welcome.css、page1.css），不被替换为带随机数的名称。

Page1.js

import ('../css/page1.css');
import ('../css/welcome.css');

window.page1_func1 = () => {
  console.log("page 1 function 1 called");
}

window.page1_func2 = () => {
  console.log("page 1 function 2 called");
}

以下是我的webpack.config.js配置：

const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    mode : 'production',
    devtool : false,
    entry : {
        welcome : path.resolve(__dirname, './src/main/resources/static/js/welcome.js'),
        start : path.resolve(__dirname, './src/main/resources/static/js/start.js'),
        page1 : path.resolve(__dirname, './src/main/resources/static/js/page1.js'),
        page2 : path.resolve(__dirname, './src/main/resources/static/js/page2.js'),
        index : path.resolve(__dirname, './src/main/resources/static/js/index.js'),
        main : path.resolve(__dirname, './src/main/resources/static/js/main.js'),
//        page1css : path.resolve(__dirname, './src/main/resources/static/css/page1.css'),
    },
    output : {
        filename: "[name].js",
        path: path.join(__dirname, './target/classes/static/js'),
        clean: true,
        assetModuleFilename : '../img/[hash][ext][query]'
    },
    module: {
        rules: [
            {
              test: /\.s[ac]ss$/i,
              use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
              ]
            },
            {
                test: /\.css$/i,
                use: [
                  MiniCssExtractPlugin.loader,
                  'css-loader'
                ]
            },
            {
                 test: /\.(jpg|jpeg|png|svg)$/,
                 type: 'asset/resource'
            }
        ]
    },
    optimization: {
       minimize: true,
       minimizer: [
         // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
          `...`,
         new CssMinimizerPlugin({
               test: /\.css$/i,
               minimizerOptions: {
                 preset: [
                   "default",
                   {
                     discardComments: { removeAll: true },
                   },
                 ],
               }  ,
         }),
       ],
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: "../css/[name].[contenthash].css",
            chunkFilename: "../css/[id].[contenthash].css",
        }),
//        new BundleAnalyzerPlugin()
    ],
}

问题原因 #

1. 采用动态import()引入CSS时，Webpack会将这部分资源拆分为独立chunk，自动生成带哈希的额外JS文件（用于加载对应的CSS chunk）。
2. 当前MiniCssExtractPlugin配置中使用了[contenthash]占位符，导致CSS文件名被添加随机哈希值。

解决步骤 #

1. 修改MiniCssExtractPlugin配置，移除哈希占位符 #

将filename和chunkFilename中的[contenthash]删除，改为直接使用[name]对应原文件名：

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

2. 给动态引入的CSS指定chunk名 #

修改JS文件中的动态import()，添加webpackChunkName注释，让chunk名与CSS原文件名一致：

import(/* webpackChunkName: "page1" */ '../css/page1.css');
import(/* webpackChunkName: "welcome" */ '../css/welcome.css');

这样Webpack会将这些CSS chunk命名为page1和welcome，对应生成page1.css和welcome.css。

3. （推荐）改用静态import避免额外JS文件 #

如果不需要拆分CSS chunk，可以将动态import()改为静态引入：

import '../css/page1.css';
import '../css/welcome.css';

此时CSS会直接打包到对应的入口JS文件中，再由MiniCssExtractPlugin提取为与入口同名的CSS文件（如page1.js对应page1.css），不会生成额外的JS文件。

内容的提问来源于stack exchange，提问作者java_baba