Webpack 如何抽离、压缩 CSS 文件？

最新推荐文章于 2025-04-04 07:30:00 发布

Celine-Coding

最新推荐文章于 2025-04-04 07:30:00 发布

阅读量1.1k

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/Celine921/article/details/124142144

版权

Webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Webpack中进行CSS的抽离和压缩，以减小文件体积，提升性能。在本地开发环境中，使用style-loader和css-loader。而在生产环境中，借助mini-css-extract-plugin、postcss-loader和less-loader等进行抽离。通过MiniCssExtractPlugin配置filename和contentHash，实现文件命名并命中缓存。最后，利用插件进行CSS压缩，使代码一行化且移除注释，加速页面加载速度。

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

关于抽离、压缩 css 文件，主要目的是为了减小体积，提升性能。

如果为本地使用，仅需配置 style-loader 和 css-loader 即可。css-loader 解析 .css 文件为 css，style-loader 把 css 代码插入到页面中。

module:{
	rules:[
		    {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                //css-loader：.css文件解析为css；style-loader：把它插入到页面中；
                loader: ['style-loader', 'css-loader']    
            },
	]
}

如果是线上环境，需要配置 webpack.prod.js 中内容。具体配置过程如下：

1、配置 loader

此步需要借助插件 mini-css-extract-plugin 去配置

//安装插件 
const MiniCssExtractplugin = require('mini-css-extract-plugin')

通过 MiniCssExtractplugin 插件的形式去加载 loader。
postcss-loader：主要做处理兼容性问题
less-loader：把 .less 文件解析为 .css 文件
css-loader：把 .css 文件解析为 css
在这里插入图片描述

2、抽离 css

filename 为打包后的文件名，文件存在于 dist/css 路径下，名为 main.xxx.css 。
contentHash 主要目的为了命中缓存，提高性能。
在这里插入图片描述

3、压缩 css

此步需借助两个插件

const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

在这里插入图片描述
到这里，css 文件已抽离、压缩结束。
通过 npm run build 命令打包后，可以看到 dist 目录下多的 css 文件（main.xxx.css xxx为哈希的值）。

压缩后的 css 文件特点：
1、所有代码变成一行；
2、没有注释了；

优点：
保证体积压缩，加载的更快。

使用场景：
通过外链的形式引用css，这样打包后的 index.xxx.js 文件就不再包含 css 内容，性能提高。