webpack抽离css，压缩css代码 和 js代码

前言

在实际生产环境中，较少使用style-loader，css代码被打包到了 main.js里面，这时候就需要对css代码进行抽离优化。

module.exports = {
	module:{
		rules:[
			test: '/\.css$/',
			use:[
				'style-loader',  // 减少使用
				'css-loader',
				'postcss-loader'
			]
		]
	}
}

抽离代码，压缩css js

使用 mini-css-extract-plugin 这个插件可以将css代码提取出来
同时可以使用optimize-css-assets-webpack-plugin插件压缩css代码
terser-webpack-plugin 压缩js代码

const miniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
	module:{
		rules:[
			test: '/\.css$/',
			use:[
				miniCssExtractPlugin.loader, // 不使用style，使用插件提供的loader来处理css
				'css-loader',
				'postcss-loader'
			]
		]
	},
	plugins:{
		// 抽离css代码
		new miniCssExtractPlugin({
			filename: 'css/main.[contentHash:8].css'
		})
	}，
	// 优化，压缩代码
	optimization:{
		minimizer:[
			// 压缩 js
			new terserWebpackPlugin()
			// 压缩 css代码
			new OptimizeCSSPlugin()
		]
	}
}

另外：webpack4 内置了uglifyjs-webpack-plugin 插件，默认打包出的 JS 文件已压缩过

npm i optimize-css-assets-webpack-plugin@5.0.1 cssnano@4.1.10 -D

Gzip压缩需要和后端nginx配合