webpack配置之postcss-loader和postcss-preset-env

在我们打包css的时候难免会遇到css的兼容性问题

此时webpack提供了postcss-loader和对应插件postcss-preset-env

而这两个东西的使用在webpack4和webpack5有些许不同

            rules: [{
                test: /\.css$/,
                use: [
                    // 'style-loader', \
                    // 取代style-loader，作用：提取js中的css为单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // // 将less文件转为css文件
                    // 'less-loader',
                    /**
                     * 兼容性处理
                     * postcss：postcss-loader和postcss-preset-env
                     * 识别对应的环境加载对应的配置
                     * 该插件帮postcss找到package.json中的browserlist里面的配置，通过配置加载指定的css兼容性样式
                     * "browserslist":{
                     * // 默认生产环境
                            "development": [
                                "last 1 chrome version",  // 兼容最近的一个chrome版本
                                "last 1 firefox version",
                                "last 1 safari version"
                            ],
                            "production":[
                                ">0.2%", 
                                "not dead", // 不要已经丢弃的浏览器
                                "not op_mini all" 不要所有的欧朋浏览器
                            ]
                        }
                     */
                    {
                        loader: 'postcss-loader',
                        options: {
                            // webpack4配置
                            // ident: 'postcss',
                            // plugins: () => [ 
                            //     // postcss插件
                            //     require('postcss-preset-env')()
                            // ]

                            //webpack5
                            postcssOptions: {
                                plugins: [
                                    require('postcss-preset-env')(),
                                ]
                            }
                        }
                    }
                ]
            },

        ]

而对应的插件postcss-preset-env是帮postcss找到package.json中的browserlist里面的配置，通过配置加载指定的css兼容性样式

我们需要对应的在package.json中配置browserlist

                       "browserslist":{
                       * // 默认生产环境
                            "development": [
                                "last 1 chrome version",  // 兼容最近的一个chrome版本
                                "last 1 firefox version",
                                "last 1 safari version"
                            ],
                            "production":[
                                ">0.2%", 
                                "not dead", // 不要已经丢弃的浏览器
                                "not op_mini all" 不要所有的欧朋浏览器
                            ]
                        }

差别及基本使用如上