webpack项目css插件压缩等步骤

minicssextractplugin css插件防止闪屏

首先安装npm i mini-css-extract-plugin -S
要求webpack5

这里就直接贴图了不知道如何配置的可以看下这篇文章

这里注意所有style-loader都需要改成插件的loader，最后在插件plugin里面new调用就好了

以上的loader是防止在网速过慢的时候由于是先打包html再去执行js–》css这样就会闪一下效果不好，这时我们就需要直接在打包出口link引入就好了，上面的插件就是这个功能

css兼容性处理

这里以postcss为例
首先下载包npm i postcss-loader postcss postcss-preset-env -D

2.配置

• webpack.prod.js

	{test: /\.less$/i,use: [MiniCssExtractPlugin.loader,//css提取单独的文件"css-loader",{loader:"postcss-loader",options:{postcssOptions:{plugins:["postcss-preset-env",//能解决大多样式兼容性问题，位置在cssloader下面less上面]}}},"less-loader"],},

最后在package.json里面做版本限制

"browserslist":["ie >= 8"]

小小提示因为我们css样式很多代码重复的因此可以在配置里面去封装

const getStyleLoader = (pre) => {return [MiniCssExtractPlugin.loader,//css提取单独的文件"css-loader",{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env",//能解决大多样式兼容性问题，位置在cssloader下面less上面]}}},pre,].filter(Boolean)//filter可以直接过滤类型undefined，如果要用里面必须是函数
}

css压缩

首先安装插件
npm i css-minimizer-webpack-plugin -S
然后再webpack中引用并配置加入插件，最后new使用

const CssMinimizerPlugin=require('css-minimizer-webpack-plugin')
//接下来在插件plugin中引用 new CssMinimizerPlugin()就可以压缩了再次打包会发现css代码成一行了