Не удается разрешить 'css-loader! Autoprefixer-loader'

Question

Я использую Webpack 4 и пытаюсь добавить поддержку моего CSS для нескольких браузеров.

Почему-то, что я делаю, не работает. Кто-нибудь знает, как мы можем исправить autoprefixer для webpack 4.

Это мой 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; 
}

Что я хочу ожидать от моего css в папке dist:

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 упоминается авторефиксер

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

и укажите список браузеров, который вы хотите поддержать в package.json, например "browserslist": [ "> 1%", "last 8 versions" ]