webpack实现css代码提取和压缩

1、直接引用样式文件，没有使用任何相关插件时，会出现css in js的情况，即打包到了一块。

打包后的dist文件并没有css相关文件。

2、css代码进行分割和压缩

• mini-css-extract-plugin：分割
• optimize-css-assets-webpack-plugin： 压缩

// css抽取插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css压缩插件
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');


const prodConfig = {
	mode: 'production',
	devtool: 'cheap-module-source-map',
	module: {
		rules:[{
			test: /\.scss$/,
			use: [
				MiniCssExtractPlugin.loader,  //这里将原来的style-loader进行了替换
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}, {
			test: /\.css$/,
			use: [
				MiniCssExtractPlugin.loader,
				'css-loader',
				'postcss-loader'
			]
		}]
	},
	optimization: {
		// css样式的代码合并
		minimizer: [new OptimizeCSSAssetsPlugin({})],
		usedExports: true, // tree shaking
		splitChunks: {
	      chunks: 'all'
	    }
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[name].chunk.css'
		})
	]
}

module.exports = merge(commonConfig, prodConfig);

• 这里将原来的style-loader进行了替换: style-loader的作用是将css挂载到页面上，而MiniCssExtractPlugin.loader是为了将css从页面上抽取出来作为文件。
• 注意loader的调用顺序： 从下往上，从右往左
• 注意tree shaking配置需要忽略掉.css文件，否则有可能打包不到样式文件
  “sideEffects”: [
  “*.css”
  ],

index.js中引入style.css和style1.css两个样式文件，打包后，两个样式文件内容合并到了一处（实际上也是splitChunks配置中的cacheGroups中的规则将二者合并到了一个文件），但是没有进行压缩。

使用optimize-css-assets-webpack-plugin可以进行样式的压缩