webpack5提取css文件

一、问题

webpack5 extract-text-webpack-plugin使用报错

二、解决办法
mini-css-extract-plugin
安装
npm i mini-css-extract-plugin -D

// 引入路径
const path = require('path');
// 打包html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 提取css文件
// const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports={
     
	entry:'./src/index.js',
	output:{
     
		// 输出文件夹
	   path: path.resolve(__dirname, "dist"), 
	   // 输出文件名称
	   filename: "bundle.js", 
	},
	module:{
     
		rules:[
			{
     
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader'
				]
			},{
     
				test:/\.less&/,
				use:[
					'style-loader',
					'css-loader',
					'less-loader'
				]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
     
			template:'./src/index.html'
		}),
		new MiniCssExtractPlugin({
     
			filename: 'build.css'
		})
	],
	mode:"development"
}	

三、css压缩
optimize-css-assets-webpack-plugin

安装
npm i optimize-css-assets-webpack-plugin -D

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');





plugins:[
		new OptimizeCssAssetsWebpackPlugin()
],