前端知识13：处理css的兼容性以及压缩css

让各个浏览器显示同样的效果 这就是兼容性。
使用psotcss处理 下载两个包post-load和postcss-preset-env来处理

安装：
npm i post-loader postcss-preset-env -D

先将css装为支持兼容性的代码 然后在使用css的其他包。
所以在一下地方加安装包：
{test:/.css$/,use:[MiniCssExtractPlugin.loader,‘css-loader’,‘postcss-loader’]} 加载顺序是从右到左

postcss-loader 这个插件需要个配置文件postcss.config.js 加载postcss-loader包的时候会找这个配置文件
内容：
module.exports ={
plugins:[
require(‘postcss-preset-env’)
]
}
该文件会调用postcss-preset-env插件

postcss-preset-env这个插件运行的时候会找package.json文件中的browserslist属性的值，来获取都要兼容哪些浏览器。
“browserslist”:[
“> 0.2%”, //百分之八十的都要支持
“last 2 versions”, //各个浏览器最新的两个版本都要支持
“not dead”//死掉的浏览器不支持。
]

如果less sass要做兼容性的话，如下配置：
{test:/.lessKaTeX parse error: Expected 'EOF', got '}' at position 80: …ostcss-loader']}̲, {test:/\.sc…/,use:[MiniCssExtractPlugin.loader,‘css-loader’,‘sass-loader’,‘postcss-loader’]}

压缩css
使用optimize-css-assets-webpack-plugin 插件压缩css内容
安装：
npm i optimize-css-assets-webpack-plugin -D
引入插件：在webpack.config.js中
const optimizeCssAssetsWebpackPlugin = reuqire(‘optimize-css-assets-webpack-plugin’)
使用：
plugins:[
new optimizeCssAssetsWebpackPlugin()
]