webpack配置之postcss-loader和postcss-preset-env_this version of postcss-preset-env is not optimise-CSDN博客

本文链接：https://blog.csdn.net/qq_41716949/article/details/117087910

本文介绍了如何在webpack 4和5中使用postcss-loader和postcss-preset-env处理CSS兼容性问题。重点在于配置postcss-loader的选项，以及在package.json中设置browserlist来指定兼容的浏览器范围。在webpack5中，配置方式有所变化，需在postcssOptions内定义plugins。确保在不同环境下，CSS能够适配各种浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们打包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" 不要所有的欧朋浏览器
                            ]
                        }

差别及基本使用如上