Autoprefixer doesn't add vendor prefix

Question

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 !