如何阻止Webpack生成模块对应的CSS chunk文件？

需求 #

• 项目需同时支持：单个全量打包文件（main.js）、拆分的模块文件（a.js/b.js/c.js）
• 仅保留1个通用main.css，不生成各模块对应的独立CSS文件

项目文件结构 #

a.js #

import 'a.css';
import b from 'b.js';
import c from 'c.js';

// some code

b.js #

import 'b.css';
import d from 'd.js';

// some code

c.js #

import 'c.css';
import e from 'e.js';

// some code

d.js #

import 'd.css';

// some code

e.js #

import 'e.css';

// some code

当前webpack配置（webpack.config.js） #

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        main: './src/a.js',
        
        c: {
            import: './src/c.js',
        },
        
        b: {
            import: './src/b.js',
        },

        a: {
            import: './src/a.js',
            dependOn: ['b', 'c']
        }
    },
    output: {
        filename: (pathData) => {
            if (pathData.chunk.name === 'main') {
                return '[name].js';
            }

            return 'modules/[name].js';
        },
        path: path.resolve(__dirname, 'dist')
    },

    optimization: {
        splitChunks: {
            chunks: chunk => chunk.name !== 'main'
        }
    },

    devtool: 'inline-source-map',

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ['autoprefixer']
                            },
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                outputStyle: 'expanded'
                            }
                        }
                    }
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: (pathData) => {
                return pathData.chunk.name === 'main' ? 'main.css' : 'modules/[name].css';
            },
        })
    ]
};

当前打包输出（dist目录） #

dist:
    main.js
    main.css
    modules:
        a.js
        a.css
        b.js
        b.css
        c.js
        c.css

期望打包输出 #

dist:
    main.js
    main.css
    modules:
        a.js
        b.js
        c.js

解决方案 #

修改webpack.config.js中的优化配置和MiniCssExtractPlugin配置，强制所有CSS合并到main.css，禁止为模块拆分chunk生成独立CSS文件：

修改后的关键配置代码 #

module.exports = {
    // ... 其他原有配置不变

    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                // 强制所有CSS/SCSS合并到main chunk对应的CSS文件
                styles: {
                    name: 'main',
                    test: /\.(css|scss)$/,
                    chunks: 'all',
                    enforce: true,
                    priority: 20
                },
                // 保留原有JS模块拆分规则
                default: {
                    chunks: chunk => chunk.name !== 'main',
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    },

    plugins: [
        new MiniCssExtractPlugin({
            // 固定输出为main.css，所有CSS都会合并到这里
            filename: 'main.css'
        })
    ]
};

配置说明 #

1. splitChunks.cacheGroups.styles：
   • 匹配所有CSS/SCSS文件，强制合并到名为main的chunk，对应输出main.css
   • enforce: true确保该规则优先于其他拆分规则
2. MiniCssExtractPlugin：
   • 移除分路径输出逻辑，固定输出文件名main.css，所有提取的CSS都会写入该文件
3. 保留JS模块拆分：
   • 通过default cacheGroup保留原有JS模块的拆分规则，确保a.js/b.js/c.js正常输出到modules目录

打包后，所有模块引入的CSS都会合并到main.css，不会再生成modules下的独立CSS文件，同时JS模块拆分不受影响。

内容的提问来源于stack exchange，提问作者Touch of the mind