概述
extract-text-webpack-plugin 是一个 webpack 插件，可以将 webpack 打包生成的 CSS 代码提取到单独的文件中，并且可以对这个 CSS 文件进行优化和压缩。这个插件在前端项目中非常有用，特别是在使用 webpack 打包时，可以减小打包文件的大小，提高页面加载速度。
安装
首先，需要安装 extract-text-webpack-plugin，可以通过以下命令进行安装：
npm install --save-dev extract-text-webpack-plugin
配置
要使用 extract-text-webpack-plugin，需要在 webpack 的配置文件中进行相应的配置。下面是一个简单的示例：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
------ -------------
------- -
--------- ------------
--
------- -
------ -
- ----- --------- ---- ---------------------------
--------- ---------------
---- - ------------ -
-- -
-
--
-------- -
--- -------------------------------
-
--上面的示例中，首先引入了 extract-text-webpack-plugin，然后在 webpack 的配置中定义了一个规则，用于匹配所有 .css 后缀的文件，并使用 ExtractTextPlugin.extract 方法来将 CSS 提取到单独的文件中。最后在插件中指定了输出的 CSS 文件名。
深度
除了基本的使用方法外，extract-text-webpack-plugin 还有一些高级功能可以用来优化和压缩生成的 CSS 文件。
优化 CSS
在将 CSS 提取到单独的文件中之后，可以使用各种工具来对这个文件进行优化。其中最常用的是 PurifyCSS，它可以通过分析 HTML 和 JavaScript 代码，找出哪些 CSS 样式没有被使用，并将其从 CSS 文件中移除。
压缩 CSS
为了进一步减小 CSS 文件的大小，可以使用像 clean-css 这样的工具来压缩生成的 CSS 代码。在 webpack 配置中添加以下插件即可：
-- -------------------- ---- -------
----- -------------- - ---------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- -------------
---------- ----
---
--- -----------------------------
--------- -----
-------- -
-------- - -------------- --
----------- -
-------- -
--- ---------------- --------- ---- --
-
-
-
--
--
-- ---
--上面的示例使用了 clean-css 来压缩 CSS 代码，并使用了 less-loader 来编译 LESS 文件。
示例代码
下面是一个简单的示例，演示如何使用 extract-text-webpack-plugin 将样式文件提取到单独的 CSS 文件中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---- ------- ------ ------------
----- ---------------- ------------------
-------
------
---------- -----------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -------- ----- -- ---- -------- -- -------- ----- --------- ------- -- -------- ------- -- ------- ------- ---------- --- -------- ---- --- ------- ---------- ----------- -------- ------ -------- ----- --- ---- ---- -------- --- -------- ---- ------------
-------
-------// index.js import './style.css';
-- -------------------- ---- -------
-- --------- --
---- -
---------- -----
------------ ----
------ -----
----------------- --
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------