webpack实现css样式对不同浏览器的兼容

众所周知，css在不同浏览器中的兼容性问题是一个十分令人头痛的问题，而用webpack工具中的postcss 就可以将打包好的css文件写成兼容一些老浏览器的css

环境：

  "devDependencies": {
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.2.0",
    "style-loader": "^1.1.3",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

环境不兼容会造成很多奇怪的问题

1.安装指定版本的 postcss-loader 和 postcss-preset-env

npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D

其中postcss-loader是一个loader，postcss-preset-env则是一个可以指定兼容浏览器版本的插件

2.配置webpack.config.js

在配置文件的module中，处理less和css的模块中，在’css-loader’之前，要先执行’postcss-loader’，这里以更复杂的加载less文件的rule为例：

less文件要经过4个loader，从下到上分别为：

1. less-loader： 把less文件编译成css文件
2. postcss-loader: 把css文件经过兼容性处理
3. css-loader: 把经过兼容性处理的css文件打包到输出的 js 文件中
4. MiniCssExtractPlugin.loader： 把js文件中的 css 单独提取出文件

    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    //用来取代style-loader，将css提取成单独的文件而不是作为style标签整合进html中
                    MiniCssExtractPlugin.loader, 
                    'css-loader', 
                    {
                        loader:'postcss-loader',
                        options:{
                            ident : 'postcss',
                            plugins:()=>[
                                //帮助postcss找到package.json中browserslist里面的配置,通过配置加载指定的css样式
                                require('postcss-preset-env')()
                            ]
                        }
                    },
                    'less-loader']
            }
        ]
    },

3.在项目文件的package.json中配置browserslist

原本的package.json是这样的：（注意package.json里不能有注释的，如果要跑起来得把json里的注释删掉）

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  	//这里还没有配dev prd 的脚本命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
	//...各种包
  }
}

加入browserslist后如下：

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  	//这里还没有配dev prd 的脚本命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
	//...各种包
  },
    "browserslist":{
    //开发环境下的浏览器数组
    "development":[
      "last 1 chrome version", //最新的chrome浏览器
      "last 1 firefox version",
      "last 1 safari version"
    ],
    //生产环境下的浏览器数组
    "production":[
      ">0.2%", //全球超过0.2%的人使用的浏览器
      "not dead", //不要已经淘汰的浏览器
      "not op_mini all " //不要op_mini全部版本
    ]
  }
}

4. 选择process.env.NODE_ENV

node进程运行时的临时环境变量NODE_ENV 决定了 使用browserslist中的 “development” 还是 “production”
默认情况下使用的是production，如果要使用development下的浏览器列表，就要手动设置process.env.NODE_ENV。
在webpack.config.js中添加语句：

	process.env.NODE_ENV = "development"

5.测试兼容后的代码

为了显示兼容的效果，这里使用一个css3的样式：backface-visibility

#box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    backface-visibility: hidden;
}

兼容后变成了：

#box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}