webpack5.58.1 css兼容性处理指令

module: {
        rules: [
            {
                test: /\.css$/,
                //style-loader 创建style标签,将样式放入
                //css-loader将css文件整合到js中
                use: [
                    //'style-loader',
                    //这个loader取代style-loader,提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    /*
                    css兼容性处理:postcss --> postcss-loader postcss-preset-env
                    帮助postcss找到package.json中browserslist里面的配置,通过配置加载设置的css兼容性
                    "browserslist":{
                    //设置nodejs环境变量:process.env.NODE_ENV='development'
                    "development":[
                        "last 1 chrome version",
                        "last 1 firfox version",
                        "last 1 safari version"
                    ],
                    //默认使用生产环境
                    "production":[
                        ">0.2%",
                        "not dead",
                        "not op_mini all"
                    ]
                    }
                     */
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    //postcss插件
                                    require('postcss-preset-env')()
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    }```

你可能感兴趣的:(笔记,css,node.js,html)