无法解析'css-loader！autoprefixer-loader'

Question

我正在使用Webpack 4，并尝试为多个浏览器添加对CSS的支持。

由于某种原因，我正在做的方式无法正常工作。 任何人都知道我们如何修复webpack 4的autoprefixer。

这是我的webpack.config

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');


module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    {
                        loader: 'css-loader!autoprefixer-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader',
                ]
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin('dist', {} ),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "[id].css"
        }),
        autoprefixer,
    ]
};

我需要在CSS中写的内容：

body {
    display: flex; 
}

我想在dist文件夹中的CSS上期望什么：

body {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

Answer 1

根据官方文档，'autoprefixer-loader'已过时，因此可能是它不能与webpack 4一起工作的原因

使用类似配置文件的“ postcss-loader”

{
   loader: 'css-loader',

}, {
   loader: 'postcss-loader',
   options: {
      config: {
        path: './tools/postcss.config.js'
      }
   }
}

在post.config.js中提到了autoprefixer

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

并在package.json中提及您要支持的浏览器列表，例如"browserslist": [ "> 1%", "last 8 versions" ]