webpack项目css插件压缩等步骤

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代码成一行了