Webpack作为前端领域常用的模块打包工具，在开发过程中有时会出现JavaScript或CSS文件闪现的问题。这个问题会给开发者带来不便，也容易导致项目的性能问题。那么该如何解决Webpack导致的JavaScript或CSS文件闪现问题呢？接下来将进行详细讲解。
问题描述
在使用Webpack进行项目开发时，若存在JavaScript或CSS等类型的文件，透过打包后的文件系统，我们很容易会发现，当我们进行构建时，会出现干扰现象：
f***king.css // 旧版构建⏰中 f***king.css?v8h7yoehg // 新版构建中
这种情况在前端开发中相当普遍。这并不是一个重大的问题，主要的影响是处理和猜测CSS的版本（同时也使开发者和构建工程师感到疲惫）。接下来介绍如何解决此问题：
解决方案
第一种方法：利用缓存
这种方式非常有效，可以在开发的情况下提供良好的文件资源加载效果。可以使用cache-loader来解决该问题。cache-loader可以自动缓存JS依赖项和飞行数据，并在之后的构建中使用，从而显着减少了构建时间。我们可以在Webpack配置文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ----------
---- ---------------- --------------- -- ------------------------------
--
-- ---
-
--
-- ---
-------- -
--- -------------- -- ----
-- ---
-
-在添加cache-loader和cache-plugin之后，Webpack不仅会缓存数据，还会在构建期间检查依赖项和飞行数据，然后使用缓存版本。当构建依赖项和飞行数据发生更改时，缓存自动失效，并强制重新构建。缓存的有效时间可以通过修改--cache标志来调整。
第二种方法：利用file-loader
尝试使用file-loader解决这个问题：
-- -------------------- ---- -------
------ -
-
----- -------------------
---- --
------- --------------
-------- -
----- ---------------
----------- --------------
----------- -------------
-
--
-
-在这个方法中，file-loader被用来处理所有图片资源，并将它们复制到构建目录中，并在代码中生成标记，指向它在输出目录中的位置。这种方式不仅可以确保资源被更有效地缓存，还可以预防同名文件的问题。
第三种方法：使用MiniCssExtractPlugin
MiniCssExtractPlugin 可以提取出CSS文件并静态链接CSS资源，而不是通过JavaScript动态加载（即做到文件名稳定）。为了使用它，只需在Webpack配置文件中添加以下内容：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
--------- --------------------------
--
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
-
-- ---
-现在你会看到，只要CSS文件未发生变化，Webpack就不会重新生成文件。因此，即使您更改了CSS文件以外的文件（例如JavaScript文件），CSS也不会重新处理。
第四种方法：使用HashedModuleIdsPlugin
确保使用的插件不同，也能解决闪烁问题。这个插件基于模块路径，生成一个哈希，如果这个模块在项目中没有发生变化，那么它的哈希值也不会发生变化。将HashedModuleIdsPlugin添加到Webpack配置文件中：
-- -------------------- ---- -------
----- ---------------------- -----------------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------
-
-- --
-现在你的Webpack配置文件已经具备稳定性了！这使得文件打包后的文件名更有可靠性，同时还有助于在检索资源时更快地获取到它们。
总结
以上我们讨论了四种解决Webpack闪现问题的方法。使用这些方法，您可以更有效地加载文件，并且可以避免出现JS或CSS文件版本控制的问题。你可以根据自己的需求选择一种或多种方式来解决问题，在项目中实现更稳定和可靠的开发。而要彻底解决这个问题，还是应该在webpack构建、版本控制和依赖更新等各个环节中多加思考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486ece648841e9894590bf6