webpack中使用postcss进行css兼容性处理

Question

# webpack.config.js的具体配置，与官网大致相符。

const {resolve} = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-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: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                // postcss的插件
                                require('postcss-preset-env')()
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(jpeg|jpg|png|git)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    outputPath: 'images'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            {
                test: /\.(woff|woff2|svg|ttf|eot)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'fonts'
                }
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './src/index.html'
        }),

        new MiniCssExtractPlugin({
            //对输出的文件进行重命名
            filename: 'css/built.css'
        }),
    ],
    mode: 'development',

    devServer: {
        contentBase: resolve(__dirname, 'build'),

        //启动gzip压缩
        compress: true,

        //端口号
        port: 3000,

        open: true,
    }
}

但就是莫名的报错，解决不了，下面是报错信息

E:\webpack_test\04html>webpack
Hash: c02a91963ca64bcf27d0
Version: webpack 4.44.2
Time: 354ms
Built at: 2020/09/28 下午6:18:03
                Asset       Size  Chunks                         Chunk Names
images/7387f1b522.png    328 KiB          [emitted] [immutable]
           index.html  410 bytes          [emitted]
          js/built.js   5.55 KiB    main  [emitted]              main
Entrypoint main = js/built.js
[./src/css/index.css] 913 bytes {main} [built] [failed] [1 error]
[./src/js/index.js] 174 bytes {main} [built]

ERROR in ./src/css/index.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/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 (E:\webpack_test\node_modules\postcss-loader\node_modules\schema-utils\dist\validate.js:98:11)
    at Object.loader (E:\webpack_test\node_modules\postcss-loader\dist\index.js:43:28)
    at E:\webpack_test\node_modules\webpack\lib\NormalModule.js:316:20
    at E:\webpack_test\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at E:\webpack_test\node_modules\loader-runner\lib\LoaderRunner.js:233:18
 @ ./src/js/index.js 1:0-27
Child HtmlWebpackCompiler:
                    Asset     Size  Chunks                         Chunk Names
    images/7387f1b522.png  328 KiB          [emitted] [immutable]
     + 1 hidden asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 792 bytes {HtmlWebpackPlugin_0} [built]
    [./src/image/111.png] 65 bytes {HtmlWebpackPlugin_0} [built]
        + 1 hidden module
Child mini-css-extract-plugin ../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js??postcss!src/css/index.css:
    Entrypoint mini-css-extract-plugin = *
    [../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js?!./src/css/index.css] ../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js??postcss!./src/css/index.css 568 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

    ERROR in ./src/css/index.css (../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js??postcss!./src/css/index.css)
    Module build failed (from ../node_modules/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 (E:\webpack_test\node_modules\postcss-loader\node_modules\schema-utils\dist\validate.js:98:11)
        at Object.loader (E:\webpack_test\node_modules\postcss-loader\dist\index.js:43:28)

package.json中的“browserslist”也是跟网上一模一样的

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

希望有大神能帮帮忙！！！

Answer 1

https://blog.csdn.net/tianxintiandisheng/article/details/102768268