什么是 Webpack？
Webpack 是一个模块化的打包工具，能够将多个 JavaScript 文件打包成单个文件。Webpack 还可以处理 HTML、CSS、图片等非 JavaScript 文件，将它们转换成模块，方便引入和使用。
Webpack 处理 CSS 文件的方式
Webpack 处理 CSS 文件的方式有两种：一种是将 CSS 当做一个模块来处理，另一种是将 CSS 抽离成单独的文件。
将 CSS 当做一个模块来处理
将 CSS 当做一个模块来处理的方式，需要使用 style-loader 和 css-loader，它们是 Webpack 中处理 CSS 的两个核心 loader。
style-loader 的作用是将 CSS 以内联样式的形式插入到 HTML 页面中，例如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- ---------------
------- -------------------------
-------
-------css-loader 的作用是将 CSS 文件转换成一个模块，以便在 JavaScript 中引用。例如：
import './style.css';
接下来，我们需要配置 Webpack，使用 style-loader 和 css-loader，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-
-将 CSS 抽离成单独的文件
将 CSS 抽离成单独的文件有两个好处：一方面可以使页面加载速度更快，另一方面可以减少打包后文件的大小。
为了将 CSS 抽离成单独的文件，需要使用 MiniCssExtractPlugin 和 css-loader。MiniCssExtractPlugin 的作用是将 CSS 抽离成单独的文件，而不是将 CSS 以内联样式的形式插入到 HTML 页面中。
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- ----------------------------- -------------
-
-
--
-------- -
--- ----------------------
--------- --------------------------
--
-
-总结
Webpack 的处理 CSS 文件的方式包括将 CSS 当做一个模块来处理，和将 CSS 抽离成单独的文件。其中，将 CSS 抽离成单独的文件可以使页面加载速度更快，但需要使用 MiniCssExtractPlugin 和 css-loader。而将 CSS 当做一个模块来处理的方式，只需要使用 style-loader 和 css-loader。通过配置 Webpack，我们可以根据自己的需要选择一种方式处理 CSS 文件，以便达到最佳性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469c116968c7c53b099550f