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. filenameoutput中的filename 命名方式一样
  2. 这里是将多个css合并成单一css文件, 所以chunkFilename 不用处理
  3. 最后产生的样式文件名大概张这样 style.550f4.cssstylesplitChunks-> 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. cssProcessorOptionscssProcessorPluginOptions 都是指定 cssProcessor 所需的参数,经本人实验cssProcessorOptions 没起作用,所以只需要指定 cssProcessorPluginOptions 即可
  3. canPrint: 是否打印处理过程中的日志

cssnano 配置说明

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

就是直接在webpackplugins中配置即可

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

欢迎评论交流

你可能感兴趣的:(webpack,前端,css)