webpack基础五：.browserslistrc文件和browserslist插件说明，以及postcss的使用

一.browserslistrc文件说明

       1. 有一个node插件叫做browserslist，可以通过npx browserslist 命令来查询浏览器版本，在查询时会根据.browserslistrc描述的版本进行查询，并在控制台打印出浏览器版本

  示例：

       a.  在node项目根目录下创建.browserslistrc文件

> 1%
last 4 version
not dead

       b.执行npx  browserslist

                .... 打印出浏览器版本

      2.browserslistrc文件和browserslist插件这两个东西有什么用？

          本身并没有太大用处，但是他需要会被其他插件结合来使用，作为判断浏览器兼容的基本条件。比如babel(将js超集语言转为js的插件)和postcss(css处理插件)，这些都需要有个转化的目的性，比如要兼容到哪个版本。

     

二.postcss插件使用

• postcss是一款处理css语言的js插件，结合autoprefixer可为css添加浏览器前缀
• postcss文件在处理css的时候，根据.browserslistrc文件来处理兼容问题
• postcss可以单独使用，也可以结合webpack使用
  • 单独使用时需要postcss , postcss-cli 
  • 和webpack使用时，需要postcss,postcss-loader,并添加相应的webpack的loader配置  ,如下代码是结合了autoprefixer（需要安装）的配置

    //...
        module: {
            rules: [
                {
                    // 需要根据对应的loader名字进行安装
                    // npm install xxx-loader -D
                    // 根据正则匹配所有css文件，对齐进行修改
                    test: /\.css$/,
                    // 数组是从尾往头执行
                    use: [
                        // 创建style标签，将js中的样式文件加载到style中，再放入head标签中
                        'style-loader',
                        // 将css文件编程commJs模块，加载到js中，以样式表的字符串形式存在
                        'css-loader',
                        {
                            loader:"postcss-loader",
                            options:{
                                postcssOptions:{
                                    plugins:[
                                        require("autoprefixer")
                                    ]
                                }
                            }
                        }
                    ]
                }
            ]
        },
    //...

三.css添加浏览器前缀插件的选择

• postcss中，autoprefixer可以添加浏览器前缀，还有另外一款叫做postcss-preset-env的插件也可以添加前缀
• 但是个人推荐使用postcss-preset-env，因为它不仅会处理前缀问题，还至于现在css特性，比如color:#12345678，在autoprefixer中不会做出来，在postcss-preset-env会将其转化为rgba格式，从而被浏览器识别