Webpack处理CSS的常规方法通常是使用 style-loader 和 css-loader 把 CSS 内联到 JS 文件里，然后通过 JS 注入到页面。如果想要常规的独立 CSS 文件，就需要使用插件来提取 CSS，在 Webpack 4 及以上版本中常用 mini-css-extract-plugin，把 webpack.config.js 中的 style-loader替换为 MiniCssExtractPlugin.loader。

需要注意的是 MiniCssExtractPlugin 在开发环境下可能不支持 HMR（Hot Module Replacement的缩写，意为模块热更新‌，主要用于前端开发中实时更新模块而不刷新页面），可以选择在开发环境下使用 style-loader，生产环境使用 MiniCssExtractPlugin，或者根据模式动态切换 Loader。

安装插件：

运行安装命令

npm install mini-css-extract-plugin css-loader --save-dev

PS：如果已经安装过 css-loader 则不需要再安装

WebPack.config.js配置

mini-css-extract-plugin 插件部分配置

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

module: {
	rules: [
		{
			test: /\.css$/i,
			use: [
				MiniCssExtractPlugin.loader, // 替换原来的 style-loader。注意使用 .loader，不要直接引用插件 MiniCssExtractPlugin
				'css-loader'
			]
		},
		// 如果使用了 Sass/Less 等预处理器，添加对应 Loader
		{
			test: /\.scss$/,
			use: [
			  MiniCssExtractPlugin.loader,
			  'css-loader',
			  'sass-loader'
			]
		}
	]
},
plugins: [
	new MiniCssExtractPlugin({
	  filename: '[name].css', // 主入口 CSS 文件名
	})
]

WebPack.config.js 文件完整配置

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

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist'),
        publicPath: '/assets/',
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader, // 替换原来的 style-loader。注意使用 .loader，不要直接引用插件 MiniCssExtractPlugin
                    'css-loader'
                ]
            },
			// 如果使用了 Sass/Less 等预处理器，添加对应 Loader
			{
				test: /\.scss$/,
				use: [
				  MiniCssExtractPlugin.loader,
				  'css-loader',
				  'sass-loader'
				]
			},
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    sources: {
                        list: [
                            {
                                tag: 'img',
                                attribute: 'src',
                                type: 'src'
                            }
                        ]
                    }
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'asset/images/[name].[hash:8][ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({ //配置插件
            filename: '[name].css', // 主入口 CSS 文件名
			//chunkFilename: '[id].chunk.css'  // 按需加载的 CSS 文件名（可选）
        }),
    ],
    devServer: {
        static: './dist',
        hot: true
    }
}

使用效果：

目录结构

src/
  index.js
  style/
    base.css
    main.css

入口文件导入

import './style/base.css';
import './style/main.css';

运行打包命令

npm run webpack --mode production

生成文件

dist/
  bundle.js        # JavaScript 文件
  main.css         # 提取合并后的 CSS 文件

因为没有设置 chunkFilename 参数，所以会把导入的css文件合并成一个css文件，如果文件比较大，建议分开。