在前端开发过程中，经常会遇到需要从 JavaScript 文件中提取 CSS 的需求。这时候，我们就可以使用 extract-css-loader 这个 npm 包来实现。
extract-css-loader 是什么？
extract-css-loader 是一个 webpack loader，用于提取 JavaScript 中的 CSS 代码，并将其输出为单独的 CSS 文件。它通常与 style-loader 配合使用，以将提取的 CSS 文件动态地插入到 HTML 中。
如何安装 extract-css-loader？
要使用 extract-css-loader，我们首先需要安装它。通过以下命令可以安装 extract-css-loader：
npm install extract-css-loader --save-dev
如何使用 extract-css-loader？
使用 extract-css-loader 可以非常简单，只需按照以下几个步骤即可。
步骤 1：安装 extract-css-loader 和 style-loader
在使用 extract-css-loader 前，我们需要先安装它所依赖的 style-loader。
npm install extract-css-loader style-loader --save-dev
步骤 2：在 webpack 配置文件中添加 extract-css-loader
在 webpack 配置文件中，我们需要添加 extract-css-loader，并将其与 style-loader 配合使用。我们可以通过以下方式来实现：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ---------------
-------- -
----------- -------------------
-
--
-
------- ---------------------
-------- -
-------- -----
---------- -----
--------- -----
-
--
------------
-
-
-
-
--在这个配置文件中，我们定义了一个名为 "rules" 的数组。在这个数组中，我们定义了一个名为 "test" 的正则表达式，用于匹配以 ".css" 结尾的文件。在 "use" 数组中，我们使用了三个 loader：style-loader、extract-css-loader 和 css-loader。
步骤 3：在 JavaScript 文件中引用 CSS 文件
最后，我们需要在 JavaScript 文件中引用 CSS 文件。可以通过以下方式来实现：
import css from 'path/to/your/css/file.css'; console.log(css);
这个例子中，我们将 CSS 文件导入为一个变量，并在控制台中输出它。当我们运行这个 JavaScript 文件时，将会从 CSS 文件中提取出样式，并将其输出到控制台中。
示例代码
以下是一个完整的示例代码，其中展示了如何使用 extract-css-loader：
webpack.config.js:
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- -
-
------- ---------------
-------- -
----------- -------------------
-
--
-
------- ---------------------
-------- -
-------- -----
---------- -----
--------- -----
-
--
------------
-
-
-
-
--src/index.js:
import css from './style.css'; console.log(css);
src/style.css:
body {
background-color: #f00;
color: #fff;
}学习与指导意义
通过学习 extract-css-loader 的使用方法，我们可以更好地理解如何在 webpack 中使用 loader，以及如何从 JavaScript 文件中提取 CSS。这对于我们开发前端应用程序非常有帮助。
同时，学习 extract-css-loader 的使用方法也可以帮助我们更好地掌握 webpack 的配置方法，以及如何通过 webpack 工具来实现前端应用程序的自动化构建与打包。这对于提高前端工作效率以及优化前端应用程序的性能都非常有益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601e81e8991b448de489