webpack(7)打包css时解决浏览器兼容性问题
1.安装包：npm install postcss-loader postcss-preset-env -D
2.在根目录下新建一个postcss.config.js文件，这个文件作为插件postcss-loader的配置文件，文件中添加代码：
module.exports={
plugins:[
require('postcss-preset-env')()//表示引入postcss-preset-env包使用
]
}
3.修改webpcak.config.js文件，引用使用postcss loader：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},//在打包css之前先用postcss-loader处理css代码
{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},//在打包css之前先用postcss-loader处理css代码
{test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']}//在打包css之前先用postcss-loader处理css代码
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({
filename:'index.css'
}),
]
}
4.在package.json中新增兼容的浏览器规则：
新增项：
"browserslist": [
"> 0.2%",//要求最少支持80%的浏览器
"last 2 versions",//要求最少支持所有浏览器最新的两个版本
"not dead"//已经死掉的浏览器可以不用支持
]
5.可以在index.css和index.scss和index.less中添加下面的新css属性测试查看打包出来的css兼容性代码的区别：
backface-visibility: hidden;
