webpack PostCSS Loader has been initialized using an options object that does not match the API

一、出现的问题

在做webpack配置css兼容的时候出现了postcss-loader插件不兼容问题：

//webpack.config.js中的原始代码
{
   test:/\.(le|c)ss$/,
   use:['style-loader','css-loader',{
       loader:'postcss-loader',
       // postcss-loader插件不兼容问题
       options:{
           plugins:function(){
               return[
                   require('autoprefixer')({//添加浏览器厂商前缀，避免手动处理样式兼容问题
                        'overrideBrowserslist':[//覆盖浏览器列表
                               ">0.25%",//查询条件来限定浏览器和 node 的版本范围（大小写不敏感）
                               "not dead"
                        ]
                   })
                ]
            }
       }
   },'less-loader'],
   exclude: /node_modules/
}

二、当前webpack版本号

├── webpack@5.74.0
└── webpack-cli@4.10.0

三、解决方法

原因：postcss-loader这个版本不支持在webpack.config.js文件

第一步： 注释掉webpack.config.js的如下部分：

//webpack.config.js
{
   test:/\.(le|c)ss$/,
   use:['style-loader','css-loader',{
       loader:'postcss-loader',
       // postcss-loader插件不兼容问题
       //options:{
       //    plugins:function(){
       //        return[
       //            require('autoprefixer')({//添加浏览器厂商前缀，避免手动处理样式兼容问题
       //                 'overrideBrowserslist':[//覆盖浏览器列表
       //                        ">0.25%",//查询条件来限定浏览器和 node 的版本范围（大小写不敏感）
       //                        "not dead"
       //                 ]
       //            })
       //         ]
       //     }
       //}
   },'less-loader'],
   exclude: /node_modules/
}

第二步： 在webpack.config.js文件同级目录下新建postcss.config.js：

//postcss.config.js
//将上面注释掉的plugins，复制到该文件
module.exports={
    plugins:function(){
        return[
            require('autoprefixer')({//添加浏览器厂商前缀，避免手动处理样式兼容问题
                'overrideBrowserslist':[//覆盖浏览器列表
                    ">0.25%",//查询条件来限定浏览器和 node 的版本范围（大小写不敏感）
                    "not dead"
                ]
            })
        ]
    }
}