概述
extract-css-chunks-webpack-plugin 是一个 webpack 插件，它可以将 CSS 文件从打包后的 JavaScript bundle 中提取出来，生成单独的 CSS 文件。这个插件非常适合用在用户需要加载大量 CSS 样式的场景中。
在本篇文章中，我们将介绍如何使用 extract-css-chunks-webpack-plugin 完成 CSS 提取，并提供详细的步骤和示例代码。
安装
通过 npm 安装 extract-css-chunks-webpack-plugin：
--- ------- ---------- ---------------------------------
配置
添加 extract-css-chunks-webpack-plugin 到你的 webpack 配置文件中：
----- ---------------- - ---------------------------------------------
-------------- - -
-- ---
-------- -
--- ------------------
-- ----------
-- --------------
--
-
-- ---
--使用
假设你有一个 src/app.js 文件和一个 src/style.css 文件，你想要将 style.css 文件提取成一个单独的文件。
首先，需要在 webpack 配置文件中指定 style.css 的入口文件：
-------------- - -
-- ---
------ -
---- ---------------
------ -----------------
--
-- ---
--然后，在 plugins 数组中添加 extract-css-chunks-webpack-plugin 插件：
----- ---------------- - ---------------------------------------------
-------------- - -
-- ---
-------- -
--- ------------------
--------- -------------------
--
-
-- ---
--这里的 filename 选项指定了生成的 CSS 文件名。[name] 将被替换为入口文件的名称，[hash] 将被替换为文件内容的 hash 值。
最后，在 app.js 中引入 style.css：
------ --------------
这样做之后，webpack 打包时将会生成一个 style.css 文件，并在 HTML 中插入一个 link 标签来引用这个文件。
示例代码
完整的 webpack 配置示例代码如下：
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ---------------- - ---------------------------------------------
-------------- - -
------ -
---- ---------------
------ -----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- --------------------
--- ------------------
--------- -------------------
--
--
------- -
------ -
-
----- ---------
---- ------------------------- -------------
-
-
-
--总结
extract-css-chunks-webpack-plugin 是一个非常有用的 webpack 插件，它可以将 CSS 文件从 JavaScript bundle 中提取出来，使得页面加载更快。在本文中，我们介绍了如何安装和配置这个插件，并提供了一个示例代码来演示如何使用它。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/56626