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;