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

Huang_John

于 2021-09-17 18:07:56 发布

阅读量279

点赞数

分类专栏： webpack 文章标签： css node.js

本文链接：https://blog.youkuaiyun.com/Huang_John/article/details/120353966

版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Webpack将CSS文件从JavaScript中分离并打包成独立文件。通过安装并配置mini-css-extract-plugin插件，可以轻松实现这一目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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". //将内容输出到指定文件
	})
]

这样就可以了