CSS 兼容性处理

处理 css 兼容性需要使用到 postcss-loader 和postcss-preset-env两个插件

一、css 兼容性处理核心配置

1.1、修改webpack.config.js 配置文件

// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
…………
    // 设置 nodejs 环境变量
    process.env.NODE_ENV = 'development';
…………

    // loader的配置
    module: {
        rules: [
            //打包 css 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    //'style-loader',
                    //这个loader取代style-loader。作用:提取js中的css成单独文件
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 这里可以指定一个 publicPath
                            // 默认使用 webpackOptions.output中的publicPath
                            // 这里如果注释掉是因为未给css文件单独分配文件夹,无需进行路径调整
                            publicPath: '../'
                        },
                    },
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                    /*
                   css兼容性处理: postcss --> postcss-loader postcss-preset-env
                   帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
                   "browserslist":{
                       //开发环境-->设置node环境变量: process.env.NODE_ENV = development
                       "development":[
                           "last 1 chrome version",
                           "last 1 firefox version",
                           "last 1 safari version"
                       ],
                       //生产环境：默认是生产环境
                       "production":[
                           ">0.2%",
                           "not dead",
                           "not op_mini all"
                       ]
                   },
                   */
                    //使用loader的默认配置
                    //'postcss-loader"
                    //修改loader的配置
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                ident: 'postcss',
                                plugins: () => [
                                    // postcss的插件
                                    require('postcss-preset-env')()
                                ]
                            }
                        }
                    }
                ]
            },
            …………
        ]
    },

webpack.config.js配置文件做了以下两处改动

改动1：添加 nodejs 环境变量设置

// 设置 nodejs 环境变量
process.env.NODE_ENV = 'development';

改动2：添加 处理 css 的 loader 配置

// 在处理 css 的 loader 配置的末端添加如下内容

//css兼容性处理: postcss --> postcss-loader postcss-preset-env
//帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
//使用loader的默认配置
//'postcss-loader"
//修改loader的配置

{
    loader: 'postcss-loader',
        options: {
            postcssOptions: {
                ident: 'postcss',
                    plugins: () => [
                        // postcss的插件
                        require('postcss-preset-env')()
                    ]
            }
        }
}

1.2、修改package.json配置文件

// 在package.json配置文件中添加如下信息
// 如需复制粘贴，请删除注释 

"browserslist": {
    //开发环境下的浏览器兼容配置
    "development": [
        //兼容最后一个版本的 谷歌浏览器
        "last 1 chrome version",
        //兼容最后一个版本的 火狐浏览器
        "last 1 firefox version",
        //兼容最后一个版本的 mac 浏览器
        "last 1 safari version",
        //兼容 ie 9到 ie12
        "ie 9-12"
    ],
    //生产环境下的浏览器兼容配置
    "production": [
        //兼容99.8%的浏览器
        ">0.2%",
        //不要兼容已经死掉的浏览器比如 IE6
        "not dead",
        //不要兼容op_mini 浏览器
        "not op_mini all"
    ]
},

二、安装loader和插件

//安装postcss-loader和postcss-preset-env
> npm i postcss-loader postcss-preset-env -D

三、运行

> webpack