当我们使用 Webpack 对前端项目进行打包时，可能会遇到页面样式错乱的问题。这是由于 Webpack 默认将 CSS 文件打包到 JS 文件中，而浏览器解析 CSS 时需要用到对应的链接，导致样式加载失败。
本文将会为大家详细介绍解决此问题的方法，并提供示例代码，帮助大家深入学习。
方法一：使用 extract-text-webpack-plugin 插件
extract-text-webpack-plugin 插件可以将 CSS 文件提取出来，单独生成文件，在 HTML 中添加相关链接，以解决样式加载失败的问题。
具体操作如下：
- 安装插件：
npm install --save-dev extract-text-webpack-plugin
- 在 webpack.config.js 配置文件中引用插件：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
-- ---
------- -
------ --
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
--
--
-------- -
--- -------------------------------
-
-test 属性用于匹配要提取的文件类型，use 属性定义了转换这些文件的 loader，该插件会将提取出来的 CSS 文件存放到 styles.css 中。
- 在 HTML 文件中添加链接，引入提取出来的 CSS 文件：
<head> <link rel="stylesheet" href="./styles.css"> </head>
方法二：使用 html-webpack-plugin 插件
html-webpack-plugin 插件可以动态生成 HTML 文件，并将打包生成的资源添加到 HTML 中。
具体操作如下：
- 安装插件：
npm install --save-dev html-webpack-plugin
- 在 webpack.config.js 配置文件中引用插件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------ --- -----
--------- -------------
--------- ------------------
--
-
-title 属性定义了生成 HTML 文件的标题，filename 属性定义了生成 HTML 文件名，template 属性定义了该插件使用哪个模板文件作为基础。
- 在模板文件中添加链接，引入 CSS 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------------------------- ---------- ----- ---------------- -------------------- ------- ------ ---- ---------------- ------- -------
总结
本文为大家介绍了 Webpack 打包后页面样式错乱的两种解决方法，其中 extract-text-webpack-plugin 插件更为常用，可以单独提取出 CSS 文件，并在 HTML 中引入链接以解决页面样式错乱的问题；而 html-webpack-plugin 插件不仅可以解决页面样式错乱的问题，还可以动态生成 HTML 文件，方便维护和管理。
希望本文的介绍能够帮助大家更好地理解和应用 Webpack。请参考以下示例代码。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ----------------- - ---------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ --
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
--
--
-------- -
--- --------------------------------
--- -------------------
------ --- -----
--------- -------------
--------- ------------------
--
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64647f35968c7c53b055c2c3