一、提取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
IMG_1037.JPG
重新打包之后,build文件夹下多了个main.css文件,项目中会自动引入打包之后的css。
如果为还想把打包后的css放进css文件夹下,那么需要再plugins里传入new MiniCss ExtractPlugin的参数filename,对输出的css文件进行重命名。最后打包出来的结果就是会把css打包到/build/css文件夹下的build.css
IMG_1040.JPG

二、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不再使用的
IMG_1043.JPG
IMG_1042.JPG
IMG_1041.JPG
有兼容性样式的:display:flex、backface-visibility:hidden;等等
一般运行是打开的生产环境(和wp配置里的mode:’development’这个没关系)默认就是生产环境,如果想要切开发环境需要去nodejs中设置环境变量(node进程运行时,临时的环境变量,通过process.env.NODE_ENV = development)设置才行
IMG_1044.JPG
设置开发环境之后,webpack打包之后的build.css,对有兼容性样式进行了处理,添加了IMG_1045.JPG
切换生产环境之后,webpack打包之后css的变化,
IMG_1046.JPG

三、压缩css(optimize-css-assets-webpack-plugin)

有的时候会使用loader有的使用plugin
一般loader比较少,大部分都是靠插件完成。性能,压缩啥的比较多靠插件,兼容性处理一般靠loader。
optimize-css-assets-webpack-plugin
这个插件已经默认就会压缩css了,所以直接调用不需要加参数
IMG_1047.JPG
压缩之后,请求速度会快,加载也会更快,用户体验更好