webpack对css进行各大平台浏览器的兼容性处理

Posted 2021-06-16 是小橙鸭丶

我们在开发配置环境时，总是能需要css兼容浏览器，才能显示效果 这里记录一下webpack对css的兼容性处理（使用的是postcss）

1.首先先创建好对应的目录，以及文件

2.下载对应的loader

npm i postcss-loader postcss-preset-env -D

3.重点：兼容css的写法

module:{
        rules:[
            {
                test:/\\.css$/,
                use:[
                    //'style-loader', //创建style标签，将样式放入
                    MiniCssExtractPlugin.loader, //这个loader取代style 作用：提取js中的css成单独文件
                    'css-loader',//将css文件整合到js文件中

                    //使用loader的默认配置
                    // 'postcss-loader',
                    //详细修改loader的配置
                    {
                        loader:'postcss-loader',
                        options:{
                            postcssOptions:{
                                ident:'postcss',
                                plugins:[
                                    require('postcss-preset-env')
                                ],
                                //下面这样写没有出现有兼容性代码
                                // plugins:() => [
                                //     //postcss的插件
                                //     require('postcss-preset-env')()
                                // ]
                            }  
                        }
                    }
                ]
            }
        ]
    },

特别注意：plugins:() => [require(‘postcss-preset-env’)()]这样的写法，webpack打包时不会报错，但是它没有出现我们想要的浏览器兼容的效果（对应的样式没有变化）， 正确的写法如上。

4.postcss-preset-env帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式，所以我们package.json的配置为如下

//具体更多的配置可以去postcss上查询
"browserslist": { 
    "development": [//开发环境下的
      "last 1 chrome version", //兼容最新的chrome
      "last 1 firefox version",//兼容最新的firefox 
      "last 1 safari version"//兼容最新的safari
    ],
    "prodection": [ //生产环境下:默认是看生产环境的
      ">0.2%", //兼容百分之98的浏览器
      "not dead", //不要已经死的浏览器
      "not op_mini all" //不要op_mini
    ]
  }

5.具体的webpack.config.js代码

/*
    将css进行兼容性处理
    1. npm i postcss-loader postcss-preset-env -D
    

*/

const htmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//设置nodejs环境变量-》才能测试开发环境下的
// process.env.NODE_ENV = 'development';

module.exports = {
    entry: './src/js/index.js',
    output:{
        filename:'js/build.js',
        path:resolve(__dirname, 'build')
    },
    module:{
        rules:[
            {
                test:/\\.css$/,
                use:[
                    //'style-loader', //创建style标签，将样式放入
                    MiniCssExtractPlugin.loader, //这个loader取代style 作用：提取js中的css成单独文件
                    'css-loader',//将css文件整合到js文件中
                    /**
                     * css兼容性处理:postcss --> postcss-loader postcss-preset-env
                     * 
                     * postcss-preset-env帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                     * 
                     * "browserslist":{
                            "development":[ //开发环境下的 如果要看开发环境 要设置node环境变量：process.env.NODE_ENV = development
                                "last 1 chrome version",
                                "last 1 firefox version",
                                "last 1 safari version" 
                            ],
                            "prodection":[ //生产环境下:默认是看生产环境的
                                ">0.2%", 兼容百分之98的浏览器
                                "not dead", 不要已经死的浏览器 
                                "not op_mini all" 不要op_mini
                            ]
                        }
                     * 
                     * 
                     */
                    //使用loader的默认配置
                    // 'postcss-loader',
                    //详细修改loader的配置
                    {
                        loader:'postcss-loader',
                        options:{
                            postcssOptions:{
                                ident:'postcss',
                                plugins:[
                                    require('postcss-preset-env')
                                ],
                                //下面这样写没有出现有兼容性代码
                                // plugins:() => [
                                //     //postcss的插件
                                //     require('postcss-preset-env')()
                                // ]
                            }  
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            //对css重命名 以及放在css目录下
            filename:'css/build.css'
        })
    ],
    mode:'development'
}

6.打包后结果如图所示：

这样就完成了对css浏览器的兼容，欢迎大家有问题的一起讨论呀