相关代码：webpack.config.js

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

module.exports={
    mode:'development',
    entry:'./src/index.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                // loader:'css-loader'
                use:[MiniCssExtractPlugin.loader,'css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/[name].css'
        })
    ]
};

相关代码：json文件

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

相关代码：报错信息

​ERROR in ./src/index.js
Module not found: Error: Can't resolve './src/index.css' in 'E:\AAAAA前端学习\网页学习\阶段二\ES6之Module模块与Babel编译\Babel 与 Webpack\Webpack\Webpack 的应用\处理CSS文件\src'
 @ ./src/index.js 1:0-24
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 713 bytes {HtmlWebpackPlugin_0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-css@1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-css@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Zhang Li\AppData\Roaming\npm-cache\_logs\2021-08-19T02_58_37_018Z-debug.log