1

我正在使用 webpack、postcss、browserslit 和 autoprefixer。除了自动前缀，一切都很好。

当我写这个css代码时，输​​出是一样的。我在https://autoprefixer.github.io/检查了我的 .css 代码和 browserslist 配置 我的配置文件是真的吗？或者我哪里错了？

.block {
    display:flex;
}

但它必须是这样的：

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

这是我的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',
        },
    };
};

和.browserslistrc

last 2 versions
> 0.5%
ie >= 11
4

0 回答 0