一、提取css成单独文件（mini-css-extract-plugin）

npm i mini-css-extract-plugin -D
上面都是在webpack.config.js配置的，记得先引入，const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)再配置
这个插件是要等css-loader将css文件整合到js文件中之后，再进行处理。此时就没必要再用style-loader（作用：创建style标签将样式放入）了，而是用这个mini代替，所以要记得在module里用MiniCssExtracPlugin.loader取代style-loader

重新打包之后，build文件夹下多了个main.css文件，项目中会自动引入打包之后的css。
如果为还想把打包后的css放进css文件夹下，那么需要再plugins里传入new MiniCss ExtractPlugin的参数filename，对输出的css文件进行重命名。最后打包出来的结果就是会把css打包到/build/css文件夹下的build.css

二、css兼容性处理（postcss）

需要loader：postcss-loader 以及 插件postcss-preset-env（这个插件帮助postcss识别某个环境和加载指定的配置，能够让兼容性精确到某一个浏览器的版本，npm i postcss-loader postcss-preset-env -D
配置：
1.修改loader的默认配置就得写成对象的形式
引用postcss插件，帮助postcss找到package.json中browserslist里的配置，通过配置加载指定的css兼容性样式
要在package.json中添加配置
‘browserslist’:{
‘development’:[……],
‘production’:[……]
}
last 1 chrome version（最近的谷歌浏览器版本）
not dead（IE10等等都不再使用）已经死的浏览器，not op_mini all不再使用的



有兼容性样式的：display:flex、backface-visibility:hidden；等等
一般运行是打开的生产环境（和wp配置里的mode:’development’这个没关系）默认就是生产环境，如果想要切开发环境需要去nodejs中设置环境变量（node进程运行时，临时的环境变量，通过process.env.NODE_ENV = development）设置才行

设置开发环境之后，webpack打包之后的build.css，对有兼容性样式进行了处理，添加了
切换生产环境之后，webpack打包之后css的变化，

三、压缩css（optimize-css-assets-webpack-plugin）

有的时候会使用loader有的使用plugin
一般loader比较少，大部分都是靠插件完成。性能，压缩啥的比较多靠插件，兼容性处理一般靠loader。
optimize-css-assets-webpack-plugin
这个插件已经默认就会压缩css了，所以直接调用不需要加参数

压缩之后，请求速度会快，加载也会更快，用户体验更好