webpack配置如下

解释在代码后面

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

module.exports = {
	entry: './src/app.js',
	mode: 'development',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js',
		clean: true
	},

	module: {
        rules: [
            {
                  test: /\.css$/i,
                  include: path.resolve(__dirname, 'src'),
                  // 主要问题出现在这里，如果同时使用'style-loader'，那么就会和MiniCssExtractPlugin.loader发生冲突，无法对css文件进行打包
                  use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            },
        ]
},
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'index.html'
    }),
  ]
}

解释：为什么'style-loader'和MiniCssExtractPlugin.loader一起使用就无法将css打包出来呢

引文在 Webpack 配置中，style-loader 和 mini-css-extract-plugin 的 loader 有不同的用途，通常不会同时使用。

开发环境用 style-loader

style-loader 是将 CSS 作为 <style> 标签动态插入到 HTML 文档的头部。这种方式适合在开发环境中使用，因为它支持热模块替换（HMR），可以在不刷新页面的情况下应用 CSS 更改。

生产环境用 mini-css-extract-plugin

而 mini-css-extract-plugin 的 loader 是将 CSS 提取到单独的文件中，这种方式适合在生产环境中使用，因为它可以利用浏览器的缓存机制，提高页面的加载速度。

如果在配置中，同时使用了 MiniCssExtractPlugin.loader 和 style-loader，这可能会导致冲突，因为两者都试图处理 CSS，但处理方式不同。

具体使用如下

const isDevelopment = process.env.NODE_ENV === 'development';

{
  test: /\.css$/i,
  include: path.resolve(__dirname, 'src'),
  use: [
    isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
  ],
},