CSS兼容性处理

让我们在写样式的时候不用太过操心兼容性问题，而把它交给工具，让工具自动去完成，这样就大大解放程序员的一些操作，让程序员只考虑最简单的东西，通过工具帮我们做兼容性处理。

目录结构沿用上一节提取CSS成单独文件

需要下载的库

postcss-loader、postcss-preset-env

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

在package.json文件中的browserlist配置

browserlist的详细配置可以去GitHub搜索关键字

注释只是为了方便理解，实际用时要删掉

"browserlist":{ // 开发环境-->设置node环境变量：process.env.NODE_ENV = development "development":[ // 兼容最近的一个xxx浏览器版本 "last 1 chrome version", "last 1 firefox version" ], // 生产环境：默认是看生产环境 "production":[ // 大于99.8%的浏览器 ">0.2%", // 不要已经死了的浏览器 "not dead", // op_mini早就死完了，国内基本没有人用 "not op_mini all" ] }

修改配置文件

注：想要激活开发环境的配置，必须设置node.js环境变量，不然browserlist将默认使用production下的配置

const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 设置node.js环境变量 process.env.NODE_ENV = 'development' module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', /** * css兼容性处理：postcss-->postcss-loader postcss-preset-env * 帮postcss找到package.json中的browserlist里面的配置，通过配置加载指定的css兼容性样式 */ // 使用loader的默认配置 // 'postcss-loader', // 修改loader的配置 { loader:'postcss-loader', options: { ident: 'postcss', plugins: ()=>[ // postcss的插件 require('postcss-preset-env')() ] } } ] }] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin({ // 对输出的文件进行重命名 filename: 'css/built.css' }) ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true } }

修改src->scc->a.css内容以便测试

#box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; }

运行webpack/npx webpack-dev-server

查看build->css->built.css

可以看到它对backface-visibility做了兼容性处理

如果配置文件中的设置node.js环境变量语句注释掉，可以让browserlist默认使用production下的配置