Webpack 是一个非常流行的前端模块化打包工具，它可以将多个模块打包成一个输出文件，以提高页面的加载速度和性能。然而，在使用 Webpack 4.x 打包项目的过程中，开发者常常会遇到一个非常烦人的问题：样式错乱。本文将对此问题进行详细分析，并提供解决方案。
问题分析
当我们使用 Webpack4 打包项目时，通常会用到 CSS/SCSS/Less 等预处理器，将样式文件打包成一个 CSS 文件，然后通过在 HTML 文件中引用该 CSS 文件来应用样式。然而，当样式文件被打包后，会发现页面上的样式并没有按照预期的样子显示，而是出现了各种奇怪的问题，例如字体大小、颜色、布局等问题。这是因为 Webpack4 打包后的 CSS 文件只包含类名和哈希值，而没有样式属性。
解决方案
方案一：利用 ExtractTextWebpackPlugin 插件
ExtractTextWebpackPlugin 是一个非常有用的 Webpack 插件，可以将打包后的 CSS 文件从 JavaScript 文件中分离出来，并生成一个单独的 CSS 文件。具体操作如下：
安装插件：
npm install --save-dev extract-text-webpack-plugin
在 Webpack 的配置文件中添加插件：
-- -------------------- ---- ------- ----- ------------------------ - --------------------------------------- -------------- - - -- --- ------- - ------ - - ----- --------- ---- ---------------------------------- --------- --------------- ---- ------------ -- -- - ----- ---------- ---- ---------------------------------- --------- --------------- ---- -------------- -------------- -- - - -- -------- - --- ------------------------------------- - --引用 CSS 文件：
<link href="style.css" rel="stylesheet" type="text/css">
这样一来，我们就可以把 CSS 样式从 JavaScript 文件中分离出来，解决样式错乱的问题。
方案二：使用 MiniCssExtractPlugin 插件
MiniCssExtractPlugin 是一个 Webpack 插件，可以将打包后的 CSS 文件从 JavaScript 文件中分离出来，与 ExtractTextWebpackPlugin 不同之处在于它只生成 CSS 文件，而不会生成多余的 JS 文件。但是它只支持 Webpack 4.x 以上版本。具体操作如下：
安装插件：
npm install --save-dev mini-css-extract-plugin
在 Webpack 的配置文件中添加插件：
-- -------------------- ---- ------- ----- -------------------- - ----------------------------------- -------------- - - -- --- ------- - ------ - - ----- --------- ---- - - ------- ---------------------------- -------- -- -- ------------ - -- - ----- ---------- ---- - - ------- ---------------------------- -------- -- -- ------------- ------------- - - - -- -------- - --- ---------------------- --------- ----------- -- - --引用 CSS 文件：
<link href="style.css" rel="stylesheet" type="text/css">
注意：MiniCssExtractPlugin 和 ExtractTextWebpackPlugin 不能同时使用。如果你同时使用它们的话，就会出现冲突。
总结
Webpack 是一个强大的前端打包工具，但它的优化需要开发者不断地去学习和实践。本文介绍了两种解决 Webpack4 打包后样式错乱的问题的方案，分别使用了 ExtractTextWebpackPlugin 和 MiniCssExtractPlugin 插件。这两种方案都可以解决样式错乱的问题，具体选择哪种方案取决于你的实际情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494452548841e98941c39d0