前言
Webpack 是一个很强大的模块打包工具，能够帮助前端工程师进行模块化开发、代码跨浏览器的兼容性、文件打包、压缩等。然而，Webpack 作为一个高度可配置的工具，当我们没有进行配置时，我们得到的代码往往都是未经优化的。
在本文中，我们将讲解如何通过使用 Webpack 进行 CSS 压缩和优化，以便更好地优化我们的 Web 应用程序。
什么是 CSS 压缩？
CSS 压缩并不是像文件压缩或图片压缩那样简单直接的概念。相反，CSS 压缩是指通过编写更短、更有效的 CSS 代码来消除多余的空格、注释和其他不必要的字符。
例如：
-- -------------------- ---- -------
----------
---- -
------- - - -----
-------- --
-
--- --- -- -
---------- -----
------ -----
----------- -------
-
---------- -
------ -----
------- - -----
-------- -----
----------------- --------
-经过 CSS 压缩后，我们将得到：
body{margin:0 0 10px;padding:0}h1,h2,h3{font-size:18px;color:#333;text-align:center}.container{width:100%;margin:0 auto;padding:20px;background-color:#ececec}CSS 压缩使文件更小，从而减少加载时间，从而提高 Web 应用程序的效率和性能。
如何在 Webpack 中使用 CSS 压缩？
为了在 Webpack 中开启 CSS 压缩，我们需要通过使用一些 Webpack 插件实现。以下是我们可以使用的一些 Webpack 插件：
1. css-minimizer-webpack-plugin
css-minimizer-webpack-plugin 是 webpack 官方维护的一个插件，它使用 cssmin 来压缩 CSS。
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
-------------- - -
-----
------------- -
--------- -----
---------- -
--- --------------------
-
-
-----
--2. optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin 是第三方插件，它使用 cssnano 去处理优化和压缩 CSS。
-- -------------------- ---- -------
----- ----------------------- - ----------------------------------------------
-------------- - -
-----
------------- -
--------- -----
---------- -
--- -------------------------
-
-
-----
--上面两个插件都可以在 Webpack 中用来压缩 CSS，但是我们如何选择呢？那么下面是这两个插件的区别：
css-minimizer-webpack-plugin是正式的 webpack 插件，因此它是官方支持的，并且可以很好地与其他 webpack 插件配合使用。optimize-css-assets-webpack-plugin是第三方插件，因此它可能有不同的特性和性能。
CSS 压缩插件的配置
cssnano 是一个强大的 CSS 处理器，它支持各种优化技术，如压缩，适当栅格化，优化选择器等。为了使用它，我们将安装以下两个软件包：
npm install cssnano --save-dev npm install postcss-loader --save-dev
安装完成后，我们需要将 postcss-loader 添加到我们的 Webpack 配置文件中，并在其中引用 cssnano：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
----- ------- - -------------------
-------------- - -
-----
------- -
------ -
-
----- ---------
---- ---------------- ------------- -----------------
-
-
--
------------- -
--------- -----
---------- -
--- --------------------
----------------- -
------- -
----------
-
---------------- -
---------- -----
--
--
--
--
---
--
--
-----
-------- -
--- ---------------------------------
--------- ------
--------- -
------- -----
---------- -----
--------- ------
-------------- -----
------------- -----
--------- -----
------------- -----
---------- -----
--------- -----
--
---
--
----
-------- ----------
------- ----------
----
--上述代码中，我们安装了 cssnano 和 postcss-loader，并在 Webpack 配置文件中添加了相应的规则和插件。此外，我们还在 CssMinimizerPlugin 中设置了 minimizerOptions 和在 postcssLoader 中设置了我们压缩的选项。
示例
以下是完整示例代码：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
----- ----------------------- - ----------------------------------------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
----- -------------
------- -
------ -
-
----- ---------
---- ---------------- ------------- -----------------
-
-
--
------------- -
--------- -----
---------- -
--- ---------------------
--- -------------------------
-
--
-------- -
--- ---------------------------------
--------- ------
--------- -
------- -----
---------- -----
--------- ------
-------------- -----
------------- -----
--------- -----
------------- -----
---------- -----
--------- -----
--
---
--
-------- ----------
------- ----------
----
--结论
CSS 压缩可以有效地减少文件的大小，从而减少加载时间，提高 Web 应用的效率和性能。在本文中，我们讨论了如何使用 Webpack 进行 CSS 压缩以及如何针对不同的 Webpack 插件进行配置。与其他优化技术一起使用，如文件缓存、代码分割等等，它可以大大提高我们的应用程序性能和优化程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672080b22e7021665e028618