请参见提取单个文件中的所有CSS
可以使用optimization.splitChunks.cacheGroups在一个CSS文件中提取CSS。“
例如：
项目结构：

$ tree -L 3 -I node_modules
.
├── dist
│   ├── main.css
│   ├── main.js
│   └── modules
│       ├── a.js
│       ├── b.js
│       └── c.js
├── package-lock.json
├── package.json
├── src
│   ├── a.css
│   ├── a.js
│   ├── b.css
│   ├── b.js
│   ├── c.css
│   ├── c.js
│   ├── d.css
│   ├── d.js
│   ├── e.css
│   └── e.js
└── webpack.config.js

字符串

注意：模块路径应以./开头，例如./a.css与./b.js.如果您汇入的模块是这样的import b from 'b'，'b'会被视为模块请求，并在模块目录（node_modules）中解析

第1条.选举主席
应在当前目录中解析的请求必须以.“/”开头
第2条.选举主席团成员
以名称开头的请求将被视为模块请求，并在模块目录（node_modules）中解析
src/a.js：

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

型
src/b.js：

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

export default 'b';

型
src/c.js：

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

export default 'c';

型
src/d.js：

import './d.css';
export default 'd';

型
src/e.js：

import './e.css';

export default 'e';

型
src/a.css：

.a {
    color: aqua;
}

型
src/b.css：

.b {
    color: bisque;
}

型
src/c.css：

.c {
    color: cadetblue;
}

型
src/d.css：

.d {
    color: yellow;
}

型
src/e.css：

.e {
    color: slateblue;
}

型
webpack.config.js：

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

module.exports = {
    mode: 'production',
    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'),
        clean: true,
    },
    optimization: {
        splitChunks: {
            chunks: (chunk) => chunk.name !== 'main',
            cacheGroups: {
                styles: {
                    name: 'styles',
                    type: 'css/mini-extract',
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    plugins: [new MiniCssExtractPlugin({ filename: 'main.css' })],
};

型
建置记录档：

> webpack

assets by path modules/*.js 1.98 KiB
  asset modules/b.js 946 bytes [compared for emit] [minimized] (name: b)
  asset modules/c.js 946 bytes [compared for emit] [minimized] (name: c)
  asset modules/a.js 134 bytes [compared for emit] [minimized] (name: a)
asset main.js 950 bytes [compared for emit] [minimized] (name: main)
asset main.css 124 bytes [compared for emit] (name: styles) (id hint: styles)
Entrypoint main 1.05 KiB = main.css 124 bytes main.js 950 bytes
Entrypoint c 1.04 KiB = main.css 124 bytes modules/c.js 946 bytes
Entrypoint b 1.04 KiB = main.css 124 bytes modules/b.js 946 bytes
Entrypoint a 258 bytes = main.css 124 bytes modules/a.js 134 bytes
orphan modules 4.83 KiB (javascript) 4.58 KiB (runtime) [orphan] 34 modules
runtime modules 7.39 KiB 9 modules
cacheable modules 119 bytes (css/mini-extract) 192 bytes (javascript)
  modules by path ./src/*.css 119 bytes
    css ./node_modules/css-loader/dist/cjs.js!./src/a.css 21 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/b.css 23 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/c.css 26 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/d.css 23 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/e.css 26 bytes [built] [code generated]
  javascript modules 192 bytes
    ./src/a.js 66 bytes [built] [code generated]
    ./src/c.js 63 bytes [built] [code generated]
    ./src/b.js 63 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 301 ms

型
产出
dist/main.css：

.a {
    color: aqua;
}

.b {
    color: bisque;
}

.d {
    color: yellow;
}

.c {
    color: cadetblue;
}

.e {
    color: slateblue;
}

型
package.json：

{
    "version": "1.0.0",
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "css-loader": "^6.8.1",
        "mini-css-extract-plugin": "^2.7.6",
        "webpack": "^5.80.0",
        "webpack-cli": "^5.0.2"
    }
}

型