webpack4 - css/less等兼容處理遇到的坑

遇到一個坑，查了好久才找出解決辦法，話不說多，問題如下：

ERROR in ./src/css/b.css (./node_modules/_css-loader@4.3.0@css-loader/dist/cjs.js!./node_modules/_postcss-loader@4.0.1@postcss-loader/dist/cjs.js??postcss!./src/css/b.css)
Module build failed (from ./node_modules/_postcss-loader@4.0.1@postcss-loader/dist/cjs.js):
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? }
at validate (C:\Users\Administrator\Desktop\Sep\...\node_modules\_schema-utils@2.7.1@schema-utils\dist\validate.js:98:11)
at Object.loader (C:\Users\Administrator\Desktop\Sep\...\node_modules\_postcss-loader@4.0.1@postcss-loader\dist\index.js:43:28)

翻譯：

ValidationError:無效的選項對象。PostCSS加載程序已使用初始化

與API架構不匹配的options對象。

-options具有未知屬性“plugins”。這些屬性有效：{ postcssOptions?, execute?, sourceMap? }

出問題的配置：

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

module.exports = {
    entry: "./src/js/index.js",
    output: {
        filename: "js/built.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                {
                    loader: 'postcss-loader', 
                    options: { 
                        ident: 'postcss', 
                        plugins: [
                            //postcss的插件
                            require('postcss-preset-env')()
                        ]
                    }
                }
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        })
    ],
    mode: "development"
}

問題原因：官方更新了配置，所以以前的方法就不行了

新配置：

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

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

新建文件 postcss.config.js

 

 內容為：

module.exports = {
    plugins: [
        require('postcss-preset-env')
    ]
}

再次打包運行，css代碼由  打包為  ，完成。

 

 最后：package.json配置也發一下

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

如果是通過視頻進來的，並且有幫助的話請留言+1，讓我知道這篇文章幫到了多少人，謝謝

參考鏈接：

　　類似問題鏈接：https://blog.csdn.net/weixin_43932098/article/details/102784887

　　官方最新配置鏈接：https://github.com/postcss/postcss/blob/master/docs/README-cn.md

　　browserslist配置鏈接： https://www.jianshu.com/p/bd9cb7861b85