前言
Webpack 是现代前端开发中经常使用的打包工具，但有时在打包后站点中会出现样式丢失的问题，这给开发者带来了一定的困扰。本文将介绍在 Webpack 中如何解决这个问题。
问题描述
样式丢失问题主要是由于打包后静态资源引用路径不正确导致的。当我们将 HTML 文件和打包后生成的 CSS 文件放在服务器上时，浏览器会尝试从相对路径加载 CSS 文件，从而找不到对应资源，导致页面样式丢失。
解决方法
为了解决这个问题，我们需要确定正确的静态资源引用路径。我们可以使用 html-webpack-plugin 插件和 mini-css-extract-plugin 插件来生成 HTML 文件和 CSS 文件，并确保静态资源引用路径正确。
首先，将 html-webpack-plugin 插件添加到 webpack 配置文件中：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- -------------------
--------- ------------------- -- -- ---- ----
--
-
-该插件会根据指定的 HTML 模板文件，生成包含正确引用路径的 HTML 文件。
接着，将 mini-css-extract-plugin 插件添加到 webpack 配置文件中：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ---------
---- -
---------------------------- -- - -------------------- -- ------------
------------
-
-
-
--
-------- -
-- ---
--- ----------------------
--------- --------------------------- -- ------ --- --
-------------- ------------------------
--
-
-mini-css-extract-plugin 插件将 CSS 文件提取到单独的文件中，并生成包含正确引用路径的 CSS 文件。
最后，我们需要在 HTML 模板文件中指定正确的 CSS 文件路径。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ------- ----------- ----- ---------------- -------------------------------- ------- ------ ---- ----- ---- -- --- ------- -------
在 link 标签中，我们将 CSS 文件路径设置为 ./main.[contenthash].css，其中 contenthash 是生成的 CSS 文件的哈希值。这样，每次打包后生成的 CSS 文件名称都会改变，从而确保引用路径的正确性。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -------------------------
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- -------------------
--------- -------------------
---
--- ----------------------
--------- ---------------------------
-------------- ------------------------
--
-
---- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ------- ----------- ----- ---------------- -------------------------------- ------- ------ ---- ----- ---- -- --- ------- -------
总结
通过使用 html-webpack-plugin 插件和 mini-css-extract-plugin 插件，我们可以解决 Webpack 打包后页面样式丢失的问题。这种方法可以确保正确的静态资源引用路径，并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64649fa2968c7c53b0581533