ExtractTextWebpackPlugin 是一个 webpack 插件，用于将 CSS 从 JavaScript bundle 中提取出来，单独生成一个 CSS 文件。这样可以避免将 CSS 样式直接嵌入到 JavaScript bundle 中，减少了 JavaScript 文件的大小，提高了页面加载速度。
安装
首先，需要安装 ExtractTextWebpackPlugin 插件。可以通过 npm 或者 yarn 进行安装：
npm install extract-text-webpack-plugin --save-dev
或者
yarn add extract-text-webpack-plugin --dev
使用方法
在 webpack 的配置文件中引入 ExtractTextWebpackPlugin，并在 plugins 中实例化该插件。以下是一个简单的示例：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
--
-------- -
--- -------------------------------
-
--在上面的配置中，我们首先引入 ExtractTextPlugin，并在 module.rules 中配置对 CSS 文件的处理规则。在 plugins 中实例化 ExtractTextPlugin，并指定提取出的 CSS 文件名为 styles.css。
配置选项
ExtractTextWebpackPlugin 还支持一些配置选项，可以根据实际需求进行设置。以下是一些常用的配置选项：
filename: 指定提取出的 CSS 文件名，默认为 'styles.css'。disable: 用于控制是否禁用插件，在开发环境中可能会用到。allChunks: 是否提取所有 chunk 中的 CSS，如果为 false，则只提取初始化的 chunk 中的 CSS。
更多配置选项可以查阅官方文档。
总结
通过使用 ExtractTextWebpackPlugin 插件，我们可以将 CSS 从 JavaScript bundle 中提取出来，单独生成一个 CSS 文件，提高页面加载速度，减少 JavaScript 文件大小。在实际项目中，可以根据具体需求对插件进行配置，以达到最佳效果。