webpack最新版问题解决一览（结合尚硅谷webpack教程食用）

最近在学webpack,白嫖党自然首选b站尚硅谷禹神的课程，不过课程是20年的，现在是22年了，自然会有很多问题，为了方便穷学生们学习，特将遇到的所有问题和解决方法分享如下。
第7集运行webpack时版本会报错，安装css-loader和style-loader后webpack会报错，在文件夹中局部npm安装最新版本webpack即可，如果node_module里面有less后面就不用再npm安装less了，反正我现在是不用安装了。
第10集中图片直接就可以使用，不用安装file-loader，估计新版内部集成了该功能。Webpack5中图片加载器的用法

          {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        },
        generator: {
            // 将图片文件输出到 static 目录中
            // 将图片文件命名 [hash:8][ext][query]
            // [hash:8]: hash值取8位
            // [ext]: 使用之前的文件扩展名
            // [query]: 添加之前的query参数
            filename: "images/[hash:8][ext][query]",
        },
        }

第12集中图片也是一样的，参考这篇博文：https://blog.csdn.net/a15297701931/article/details/124611698 字体和其他文件不要file-loader了，代码就这样
       {
        test: /\.(ttf|eot|svg|woff|woff2)/,
        type: 'asset/resource',
        generator: {
          // 生成文件的文字  定义规则
          filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff
        },
      },
第14集中由于采取了最新的写法，所以不会出现css的路径问题。
第18集由于退出历史舞台，所以。。就不用细看，polify也gg了。
第19集，因为现在安装webpack默认是版本5，所以不能使用optimize-css-assets-webpack-plugin,取而代之的是cssminimizerwebplugin,按照官方文档使用即可。
有时候会遇到npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility错误，执行npm update更新依赖即可。

最后把webpack.prod.js代码分享如下，编程是一场修行，主要靠自己啦。

/*
该文件是webpack的配置文件，素有webpack的任务，用到的loader、plugins都要配置在这里
该文件是符合CJS模块规范
*/
//引入node中一个内置的path模块，专门用于解决路径问题
const {resolve}=require('path');
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象（规则）
baseCssLoader=["style-loader","css-loader"]
//引入，用于提取css为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports={
    mode:'production',//工作模式
    entry:'./src/js/app.js',//入口
    output:{
        path:resolve(__dirname,'../build'),//输出文件的路径
        filename:'js/app.js'//输出文件的名字
    },
    //module.rules中配置一个一个的loader
    module: {
        rules: [
          {
            test: /\.css$/,//匹配规则 该loader要处理的文件
            use: 
            [MiniCssExtractPlugin.loader, "css-loader",
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                      'postcss-preset-env',
                  ],
                },
              },
            },
          ],
            /*[
                "style-loader", //创建style标签，将js样式资源插入进行，添加到head中生效
                "css-loader"//将css文件变成commonjs模块加载js中，里面内容是样式字符串
            ],*/
          },
          {
            test: /\.less$/,//匹配规则 该loader要处理的文件
            use: [...baseCssLoader,"less-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
              }
            },
            generator: {
                // 将图片文件输出到 static 目录中
                // 将图片文件命名 [hash:8][ext][query]
                // [hash:8]: hash值取8位
                // [ext]: 使用之前的文件扩展名
                // [query]: 添加之前的query参数
                filename: "images/[hash:8][ext][query]",
            },
           },
           {
            test: /\.(ttf|eot|svg|woff|woff2)/,
            type: 'asset/resource',
            generator: {
              // 生成文件的文字  定义规则
              filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff
            },
          },
           {
            test: /\.html$/i,
            loader: "html-loader",
          },
          //配置js语法检查
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
                //自动修复 eslint 的错误
                fix: true
            }
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ]
    },
    optimization: {
      minimizer: [
        // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
        // `...`,
        new CssMinimizerPlugin(),
      ],
    },
    //plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
    new HtmlWebpackPlugin({
        template:'./src/index.html'//模板的位置
    }),
    //实例化mimicssextract
    new MiniCssExtractPlugin({
      filename:'css/index.css'
    }
    )
    ],
}