Webpack autoprefixer problem. .browserslitrc ignored

256 views Asked by At

I am using webpack, postcss, browserslit and autoprefixer. Everything is working good except autoprefixer.

When i write this css code, output is same. I checked my .css codes and browserslist config in https://autoprefixer.github.io/ Is my config file true? Or where i am wrong?

.block {
    display:flex;
}

But it must be like this:

.block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Here is my webpack.config.js

const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = (env, argv) => {
    return {
        entry: {
            bundle: './src/index.js',
        },
        output: {
            filename: '[name].js',
        },
        optimization: {
            minimizer: [
                new TerserJSPlugin({
                    sourceMap: true,
                }),
                new OptimizeCSSAssetsPlugin({
                    cssProcessorOptions: {
                        map: {
                            inline: false,
                            annotation: true,
                        },
                    },
                }),
            ],
        },
        plugins: [
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                moduleFilename: (chunk) => {
                    return chunk.name === 'script' ? 'style.css' : '[name].css';
                },
                chunkFilename: '[id].css',
            }),
        ],
        devtool:
            argv.mode === 'development'
                ? 'cheap-module-source-map'
                : 'source-map',
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            plugins: [
                                '@babel/plugin-proposal-class-properties',
                            ],
                            presets: ['@babel/preset-env'],
                        },
                    },
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    plugins: [autoprefixer()],
                                },
                            },
                        },
                        'sass-loader',
                    ],
                },
            ],
        },
        externals: {
            jquery: 'jQuery',
        },
    };
};

And .browserslistrc

last 2 versions
> 0.5%
ie >= 11
0

There are 0 answers