webpack-css打包超详解 ( 分离 & 压缩 )

Posted 2021-06-30 前端呆头鹅

webpack-css打包 ( 分离 & 压缩

• 零 功能简介
• 一 extract-text-webpack-plugin
• 二 MiniCssExtractPlugin
• 三 css-minimizer-webpack-plugin
• 四 optimize-css-assets-webpack-plugin

零 功能简介

webpack是一款模块化打包软件，通过插件和加载器的配置，它可以对html,js,css进行分离打包和压缩。

分离打包插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件。

压缩会将css文件进行压缩，如注释压缩和格式压缩，选择器精简等。

其中html通过插件HtmlWebpackPlugin完成，js默认压缩，这里重点讲一下css，因为呆头鹅在配置过程中遇到了多个问题报错。

报错分两种：

• webpack版本与所用插件不兼容
• 所用插件之间不兼容

css的打包和压缩配置相关四个插件。

首先上总结：

低版本用extract-text-webpack-plugin分离打包，optimize-css-assets-webpack-plugin压缩，高版本使用MiniCssExtractPlugin分离打包，css-minimizer-webpack-plugin压缩。

一 extract-text-webpack-plugin

首先引入该依赖。

npm install extract-text-webpack-plugin --save-dev

在wabpack配置文件中引入并配置。

var Ex = require('extract-text-webpack-plugin');

module.exports = {
    ...
	// ...省略
	module: {
  		loaders: [{
    		test: /\\.css/,
    		loader: Ex.extract('style-loader', 'css-loader','less-loader')  
            // 单独打包出CSS，这里配置注意下
  		}]
	},
	plugins: [
  		new Ex("[name].css")
	]
    ...
}

然后打包编译。

npm run build

这里存在一个问题，就是高版本不兼容问题，文档上写着4x后不兼容，实际呆头鹅使用的是3.3.12版本，也是不兼容的。

不兼容则使用另一个插件进行打包。

二 MiniCssExtractPlugin

引入后配置，这里需要注意use中不能添加style-loader。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    ...
	module: {
    	rules: [{
        	test: /\\.css$/,
        	use: [
           		MiniCssExtractPlugin.loader,
           		'css-loader'
        	]
    	}]
	},
	plugins: [
  		new MiniCssExtractPlugin()
	]
    ...
}

如果使用了MiniCssExtractPlugin的方式抽离css，在后面配置压缩css时就需要使用对应的css-minimizer-webpack-plugin。

三 css-minimizer-webpack-plugin

npm i css-minimizer-webpack-plugin -D

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    ...
	plugins: [
		...,
		new CssMinimizerWebpackPlugin()
	]
	...
}

四 optimize-css-assets-webpack-plugin

如果使用的是第一种打包插件extract-text-webpack-plugin，就可能需要插件optimize-css-assets-webpack-plugin，同时使用cssnano进行压缩。

安装依赖。

npm i optimize-css-assets-webpack-plugin
npm i cssnano -D

引用插件。

module.exports = {
    ...
	plugins: [
		...,
		new OptimizeCSSAssetsPlugin({
			assetNameRegExp: /.css$/g,
			cssProcessor: require('cssnano')
		})
	]
    ...
}