在前端开发中，经常会使用 webpack 打包工具来进行代码的处理和打包。而在 webpack 打包中，我们经常需要将样式文件分离到单独的 css 文件中，这就需要用到一个用于提取 css 文件的 webpack 插件——extract-css-assets-webpack-plugin。本文将为大家详细介绍该 npm 包的使用教程，并通过例子进行演示。
什么是 extract-css-assets-webpack-plugin？
extract-css-assets-webpack-plugin 是一个能够提取样式文件的 webpack 插件。它通过将 css 文件从 js 文件中分离出来，将样式文件单独输出到一个 css 文件中，并在 html 文件中引入该 css 文件，从而提高页面的加载速度。
如何使用 extract-css-assets-webpack-plugin？
首先，我们需要将该插件安装到项目中：
npm install extract-css-assets-webpack-plugin --save-dev
然后，在 webpack 配置文件中引入该插件，并添加配置：
-- -------------------- ---- -------
----- ---------------------- - ---------------------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- --------------------------------
--------- ---------------
---- -
-------------
----------------
-
--
-
-
--
-------- -
--- ------------------------
--------- ---------------------------------
-------------- ---------------------------------------
--
-
-上面的代码中，我们首先通过 require 引入了 extract-css-assets-webpack-plugin 模块，然后在 module.rules 中配置了样式文件的处理规则，并使用 ExtractCssAssetsPlugin.extract 方法提取 css 文件。接着，在 plugins 中添加了 ExtractCssAssetsPlugin 构造函数，用于配置 css 文件的输出。可以看出，我们将提取出来的 css 文件输出到了项目的 css 文件夹中，并且包含了 contenthash 作为版本控制，从而避免浏览器缓存问题。
示例演示
接下来，我们将通过一个简单的示例来演示如何使用 extract-css-assets-webpack-plugin。
首先，我们需要准备一些依赖包：
npm init -y npm install webpack webpack-cli css-loader style-loader postcss postcss-loader autoprefixer extract-css-assets-webpack-plugin html-webpack-plugin -D
其中，autoprefixer 和 postcss 用户自动添加浏览器前缀。
接着，我们创建一个 webpack.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------------- - ---------------------------------------------
----- ----------------- - -------------------------------
----- ------------ - ------------------------
-------------- - -
------ -----------------
------- -
--------- -----------------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- --------------------------------
--------- ---------------
---- -
-------------
----------------
-
--
-
-
--
-------- -
--- ------------------------
--------- ---------------------------------
-------------- ---------------------------------------
---
--- -------------------
--------- ----------------------- ------------------
--------- -------------
------- -
------------------- -----
--------------- -----
---------------------- ----
--
----- -----
--
-
-这里设置入口文件为 src/index.js，输出文件夹为 dist，然后在 module.rules 中添加 css 处理规则，并配置了 ExtractCssAssetsPlugin 和 HtmlWebpackPlugin 插件。
接下来，我们在 src 文件夹下创建 index.html 和 index.js 文件：
index.html：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------------- ------------ ----- ---------------- -------------------------------- ------- ------ --------- ----------- ------- -------
index.js：
import './css/index.css';
然后，我们在 src 文件夹下创建一个 css 文件夹，用于存放样式文件：
index.css：
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
}最后，我们运行以下命令：
npx webpack
然后，会在 dist 文件夹下生成输出文件。我们可以通过打开 index.html 文件来查看提取出来的 css 文件是否正常工作。
总结
本文为大家介绍了 extract-css-assets-webpack-plugin 的使用方法，并通过一个简单的示例演示了该插件的具体配置方法。希望这篇文章能够帮助前端开发者更好地使用 webpack 工具进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf7b5cbfe1ea0610602