Webpack 是一个基于 Node.js 的静态模块打包工具，通过 Webpack 可以将多个 JavaScript 文件打包成一个文件，从而减少页面的请求次数和文件大小，提高页面加载速度。此外，Webpack 能够处理 CSS 文件，并将其打包到 JavaScript 文件中或生成独立的 CSS 文件。
Webpack 打包 CSS 的两种方式
Webpack 打包 CSS 文件有两种方式：将 CSS 文件打包到 JavaScript 中或将其生成独立的 CSS 文件。
将 CSS 文件打包到 JavaScript 中
将 CSS 文件打包到 JavaScript 中，可以使用 style-loader 和 css-loader 这两个 loader。
其中，style-loader 能够将 CSS 插入到 HTML 文档中的 style 标签中，css-loader 负责解析 CSS 文件，并将其转化为 JavaScript 对象，最终将 CSS 文件打包到 JavaScript 文件中。
示例代码如下：
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--在入口文件中导入 CSS 文件：
------ --------------
Webpack 打包后的文件中，会将 CSS 文件转化为 JavaScript 对象，并将其插入到 HTML 文档中的 style 标签中。
将 CSS 文件生成独立的文件
将 CSS 文件生成独立的文件，可以使用 MiniCssExtractPlugin 插件。
MiniCssExtractPlugin 能够将 CSS 文件提取出来，并生成独立的 CSS 文件。需要注意的是，将 CSS 文件打包成独立的文件，会增加页面请求次数，并可能会影响页面加载速度。
示例代码如下：
----- -------------------- - -----------------------------------
-------------- - -
-------- -
--- ----------------------
--------- ---------------------------
---
--
------- -
------ -
-
----- ---------
---- ----------------------------- --------------
--
--
--
--在入口文件中导入 CSS 文件：
------ --------------
Webpack 打包后的文件中，会生成一个独立的 CSS 文件，文件名为 [name].[contenthash].css。
Webpack 分离 CSS 的优缺点
Webpack 分离 CSS 文件的优点是：
可以减少 JavaScript 文件的体积，提高页面加载速度。
可以缓存 CSS 文件，从而减少页面请求次数，提高页面加载速度。
可以将 CSS 文件作为单独的资源进行缓存。
Webpack 分离 CSS 文件的缺点是：
可能会增加页面请求次数，影响页面加载速度。
会增加配置的复杂度。
结论
对于简单的项目，将 CSS 文件打包到 JavaScript 文件中即可。但对于复杂的项目，分离 CSS 文件可以提高页面加载速度和性能。需要根据项目的实际情况选择合适的打包方式。
除此以外，还有一些优化 Webpack 打包的方法：
使用 PurgeCSS 去除未使用的 CSS。
使用 PostCSS 进行 CSS 处理。
使用 Tree shaking 去除未使用的 JavaScript 代码。
使用 CDN 加速静态资源加载。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6700dddccf7dac3d7c048910