webpack 处理css/less兼容性遇到的- options has an unknown property ‘plugins‘问题

报错为

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap? }

出问题的配置

const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin= require("html-webpack-plugin");

process.env.NODE_ENV = "development";

module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "js/built.js",
    path:resolve(__dirname, "build")
  },
  module:{
    rules: [
      {
        test:/\.css$/,
        use: [
           loader: MiniCssExtractPlugin.loader,
           options:{
             publicPath: "../" 
            }
          },
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [
                require("postcss-preset-env")()
              ]
            }
          }
      {
        test:/\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options:{
              publicPath: "../"  
            } 
          },
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(jpg|gif|png)$/,
        loader: "url-loader",
        options: {
          limit: 8*1024,
          name: "[hash:10].[ext]",
          esModule: false,
          outputPath: "imgs"
        }
      },
      {
        test: /\.html$/,
        loader: "html-loader"
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)/,
        loader: "file-loader"
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "css/built.css"
    })
  ],
  mode: "development",
  devServer:{
    contentBase: resolve(__dirname, "build"),
    compress: true,
    port:9008,
    open:true
  }

}

主要看

			{
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [
                require("postcss-preset-env")()
              ]
            }
          }

问题:这里的plugins webpack识别不了

方法1:修改配置

新配置

主要修改:

{
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      ident: "postcss"
                    },
                  ],
                ],
              },
            },
          },

全部为:

const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin= require("html-webpack-plugin");

process.env.NODE_ENV = "development";

module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "js/built.js",
    path:resolve(__dirname, "build")
  },
  module:{
    rules: [
      {
        test:/\.css$/,
        use: [
           loader: MiniCssExtractPlugin.loader,
           options:{
             publicPath: "../"  
            }
          },
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      ident: "postcss"
                    },
                  ],
                ],
              },
            },
          },
          // {
          //   loader: "postcss-loader",
          //   options: {
          //     ident: "postcss",
          //     plugins: () => [
          //       require("postcss-preset-env")()
          //     ]
          //   }
          // }
        ]
      },
      {
        test:/\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options:{
              publicPath: "../"  
            } 
          },
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(jpg|gif|png)$/,
        loader: "url-loader",
        options: {
          limit: 8*1024,
          name: "[hash:10].[ext]",
          esModule: false,
          outputPath: "imgs"
        }
      },
      {
        test: /\.html$/,
        loader: "html-loader"
      },
      {
        exclude: /\.(html|js|css|less|png|jpg|gif)/,
        loader: "file-loader"
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "css/built.css"
    })
  ],
  mode: "development",
  devServer:{
    contentBase: resolve(__dirname, "build"),
    compress: true,
    port:9008,
    open:true
  }

}

方法2:新建配置文件

内容:

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        ident: "postcss"
      },
    ],
  ],
}

package.json配置添加的

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

效果

兼容前:

#box1 {
  width: 100px;
  height: 100px;
  background-color: palevioletred;
  display: flex;
  backface-visibility: hidden;
}

兼容后:

#box1 {
  width: 100px;
  height: 100px;
  background-color: palevioletred;
  display: flex;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

参考
postcss-loader使用说明