webpack4 css打包、压缩、分离、去重等优化配置详解

Webpack 4 目前版本已经到了4.27 相较于前面的版本还是有一些改动的，具体可以参考升级指南 迁移到新版本
这里只介绍 css 的 打包、压缩、分离、去重 的方法；
不懂的或者有更优的方案，欢迎评论交流

用到的插件及loader

插件	描述	备注
mini-css-extract-plugin	主要用于提取css	需要安装
optimize-css-assets-webpack-plugin	主要用于压缩、去重	需要安装
style-loader	–	需要安装
css-loader	–	需要安装
autoprefixer	添加前缀，兼容不同浏览器	需要安装
postcss-import	处理css的@import 只支持本地的 import 处理,不支持http 等远程的URL链接的处理	需要安装
cssnano	css优化处理器 官网	需要安装

具体配置

开发环境

为了开发效率，一般都直接inline即可;即：使用style-loader直接使用style标签引入，不需要涉及到压缩，打包等操作，因为这些操作是比较耗时的操作，开发就没必要了

配置如下，

module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            }
     ]
 }

生产环境

引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

配置loader

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('postcss-import')(),
                                require('autoprefixer')({
                                    browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
                                })
                            ]
                        }
                    }
                ]
            }
     ]
}

将多个css文件合并成单一css文件

主要是针对多入口，会产生多分样式文件，合并成一个样式文件，减少加载次数
配置如下

1、配置splitChunks

optimization:{
	splitChunks: {
            chunks: 'all',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            name: true,
            cacheGroups: {
                styles: {
                    name: 'style',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
}

2、配置插件

1. filename 与output中的filename 命名方式一样
2. 这里是将多个css合并成单一css文件, 所以chunkFilename 不用处理
3. 最后产生的样式文件名大概张这样 style.550f4.css ； style 是 splitChunks-> cacheGroups-> name

	new MiniCssExtractPlugin({
            filename: 'assets/css/[name].[hash:5].css',
            // chunkFilename: "assets/css/[name].[hash:5].css",
    }),

优化样式文件，去重、压缩等处理

1. 主要使用 optimize-css-assets-webpack-plugin 插件和 cssnano 优化器
2. cssnano 优化器具体做了哪些优化 可参考 官网
3. cssnano 优化器也可以在loader中配置，除了 不能去重 之外，其他效果等同，所以小编这里就只在plugin中配置了，免得在配置一遍

有两种配置方式，效果等同

第一种方式

optimization:{
	 minimizer: [
            new OptimizeCSSAssetsPlugin({
                assetNameRegExp: /\.css$/g,
                cssProcessor: require('cssnano'),
                // cssProcessorOptions: cssnanoOptions,
                cssProcessorPluginOptions: {
					preset: ['default', {
				        discardComments: {
				            removeAll: true,
				        },
				        normalizeUnicode: false
				    }]
				 },
                canPrint: true
            })
        ]
}

配置说明：

1. cssProcessor 处理器：默认就是cssnano
2. cssProcessorOptions和cssProcessorPluginOptions 都是指定 cssProcessor 所需的参数，经本人实验cssProcessorOptions 没起作用，所以只需要指定 cssProcessorPluginOptions 即可
3. canPrint: 是否打印处理过程中的日志

cssnano 配置说明

1. discardComments: 对注释的处理
2. normalizeUnicode: 建议设置为false,否则在使用 unicode-range 的时候会产生乱码 详情参考 normalizeUnicode

第二种方式

就是直接在webpack的plugins中配置即可

plugins:[
            new OptimizeCSSAssetsPlugin({
                assetNameRegExp: /\.css$/g,
                cssProcessor: require('cssnano'),
                // cssProcessorOptions: cssnanoOptions,
                cssProcessorPluginOptions: {
					preset: ['default', {
				        discardComments: {
				            removeAll: true,
				        },
				        normalizeUnicode: false
				    }]
				 },
                canPrint: true
            })
        ]

欢迎评论交流