Autoprefixer doesn't add vendor prefix

I think there is something wrong with my webpack configuration or postcss plugins configuration. My test file 'dist/main.css' is well created but no vendor prefix are added. I've tried to used css property that are listed from npx autoprefixer --info , but it still doesn't add vendor prefix for my css style. Below is my webpack file.

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === 'development'


module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx', '.scss', '.sass']
    },
    module: {
        rules: [
            {
                test: /\.(js||jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /(\.css|scss)$/,
                exclude: /node_modules/,
                use: [
                    isDevelopment ?
                        { loader: 'style-loader' }
                        :
                        MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: isDevelopment
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                config: true
                            },
                            sourceMap: isDevelopment
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: isDevelopment
                        }
                    },
                ]
            },
            {
                test: /\.(png||jpe?g||gif)$/,
                loader: 'url-loader?limit=10000&name=img/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/public/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new webpack.DefinePlugin({
            "process.env": JSON.stringify(dotenv.parsed)
        }),
        new MiniCssExtractPlugin()
    ],
    devServer: {
        compress: true,
        port: 5050
    }
}

and this is how i add autoprefixer for my postcss plugins

// postcss.config.js
module.exports = {
    plugins: () => {
        return [
            require('autoprefixer')({
                grid: true
            })
        ]
    }
}

this is my browserslist

// package.json

...
"browserslist": [
        "> 1%",
        "last 5 versions"
    ]

Thanks in advance !

I also ran into the same issue previously. I'm not sure what was the problem exactly but as I switched to use the postcss-preset-env which is mentioned here https://github.com/webpack-contrib/postcss-loader#autoprefixer (it says the autoprefixer is added in the preset, we don't need to add it separately), it works fine for me.

After you installed, you just switch your postcss.config.js as following:

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv(),
  ],
}