webpack 前端性能优化----css篇

webpack将css打包成独立文件

webpack.config.js如下配置：
需要用到mini-css-extract-plugin，安装

npm install mini-css-extract-plugin

在webpack中引入

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

在module选项中使用mini-css-extract-plugin

rules:[
	{
		test:/\.css$/,	  //正则匹配所有css文件
		use:[
			// "style-loader",   //将转译后的css文件创建style标签插入到页面上,如果使用了mini-css-extract-plugin则不使用它
			MiniCssExtractPlugin.loader,  //将js中的css代码提取为一个单独文件，取代style-loader
			"css-loader",   //将css代码插入到js代码中
		]
	}
],
//在plugin中引入插件

plugins:[
	new MiniCssExtractPlugin({
		filename:"css/main.css". //将内容输出到指定文件
	})
]

这样就可以了