Webpack 打包后如何分离 CSS 和 JS 文件
在前端开发中，我们通常会使用 Webpack 进行代码打包，将多个文件合并成一个文件，以提升页面性能。但是，经常我们会发现页面加载速度变慢，原因是由于 Webpack 打包后将所有的 CSS 和 JS 文件合并到了一起，增大了文件大小，导致页面加载速度慢。那么如何解决这个问题呢？本篇文章将详细介绍如何使用 Webpack 将 CSS 和 JS 文件分离开，从而提高页面性能。
Webpack 4.x 版本已经将 extract-text-webpack-plugin 插件废弃，推荐使用 mini-css-extract-plugin 插件进行 CSS 分离和压缩。这个插件可以将 CSS 提取到单独的文件中，将 JS 提取到单独的文件中，从而避免了打包后文件太大的问题。下面我们来一步步实现。
首先，我们需要安装 mini-css-extract-plugin，可以通过以下命令进行安装：
npm install --save-dev mini-css-extract-plugin
接着，在 Webpack 配置文件中加入插件：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-------- -
--- ----------------------
--------- -------------------------------
-------------- ------------------------------
--
-
-上面的代码中，我们首先引入了 MiniCssExtractPlugin 插件，然后加入了插件配置。其中，filename 是分离后 CSS 文件的名称，chunkFilename 是分离后的动态加载 CSS 文件的名称。
接着，我们需要修改一下规则，将处理 CSS 的 rule 配置修改如下：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ---------------------------
--
------------
-
-
-
-
-这里的 MiniCssExtractPlugin.loader 是 mini-css-extract-plugin 插件提供的 loader，它会将 CSS 提取到单独的文件中。到此为止，我们已经成功将 CSS 和 JS 文件分离开了。我们可以在浏览器中打开页面并查看源代码，注意到 CSS 文件已经被单独提取出来了，引入方式是 link 标签。
最后，我们可以通过以下命令进行打包，注意到打包后生成的文件已经将 CSS 和 JS 分离开了：
npx webpack --mode production
通过上面的操作，我们成功地将 CSS 和 JS 文件分离开，并提升了页面性能。后续我们还可以使用 cssnano 等插件进一步压缩和处理 CSS 文件，达到进一步优化的效果。
总结
本文详细介绍了如何使用 Webpack 将 CSS 和 JS 文件分离开，从而提高页面性能。我们通过安装 mini-css-extract-plugin 插件来实现了 CSS 文件的分离和压缩，并在配置文件中加入了相应的插件和 loader；最后通过打包命令验证了代码分离后的效果。这个功能在前端开发中是非常常见的，掌握了这个知识点能够帮助我们更好地提高页面性能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c5108968c7c53b0b50f03