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