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下的配置