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