在前端开发中，使用 Webpack 是一种十分常见的构建工具。它可以将多个文件打包成一个文件，减少 HTTP 请求次数，提高网站性能。同时，Webpack 也能够处理 CSS 文件，并将其打包到最终输出的 JavaScript 文件中。不过，如果你想使用外部 CSS 文件，该怎么办呢？本文将带你了解如何在 Webpack 中引用外部 CSS 文件，并将其打包到最终输出的文件中。
引用外部 CSS 文件
在 Webpack 中引用外部 CSS 文件十分简单，只需要使用 style-loader 和 css-loader 即可。style-loader 会将 CSS 文件以 <style> 标签的方式插入到 HTML 中，css-loader 则会将 CSS 文件解析成 JavaScript 模块。在安装好这两个 loader 后，我们只需要在 Webpack 的配置文件中进行如下设置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
--
--
--
--
--通过以上配置，Webpack 就可以将 .css 后缀名的文件作为模块进行打包，同时将其应用到 HTML 文件中。
示例代码
假设我们的项目目录如下：
project ├── dist │ └── index.html ├── index.js ├── index.html └── style.css
其中，index.html 为入口 HTML 文件，style.css 为我们要引用的外部 CSS 文件。为了方便展示，我们在 index.html 文件中添加一个 div 元素，并给其设置了一个 class，它将会在 style.css 文件中被定义：
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ----- ---------------- -------------- ------------ ------- ------ ---- ------------------ ------- ------------------------- ------- -------
在 style.css 文件中，我们定义了一个名为 box 的类，用于改变 div 元素的样式：
/* style.css */
.box {
width: 100px;
height: 100px;
background-color: red;
}在入口文件 index.js 中，我们需要引入 style.css 文件：
// index.js import './style.css';
最后，我们需要在 Webpack 配置文件中进行如下设置：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- -
---------------
-------------
--
--
--
--
--为了使配置文件中的 filename 和 path 对应于实际的文件名和路径，我们需要使用 Node.js 内置的 path 模块进行处理。
最后，在命令行中执行 Webpack，即可在 dist 目录下生成最终的 HTML 和 JavaScript 文件。运行 index.html 文件，我们会看到一个红色的正方形，这说明引用外部 CSS 文件已经成功：
# 命令行 npm install webpack webpack-cli style-loader css-loader --save-dev npx webpack
总结
在本文中，我们介绍了如何在 Webpack 中引用外部 CSS 文件。我们通过使用 style-loader 和 css-loader，将 .css 文件作为模块进行打包，并将其插入到 HTML 文件中。如果你想使用多个 CSS 文件，可以在配置文件中添加多个 test 对象。本文提供的示例代码能够帮助你快速实现外部 CSS 文件的引用和打包，希望对你的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f97ceef6b2d6eab30fc2a2