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
	})
]

歡迎評論交流