在前端开发过程中，我们经常会用到 webpack 进行模块打包。而在 webpack 打包后，最终生成的文件名往往是带有 hash 的，这主要是为了保证文件的缓存性能。但是，我们在开发过程中需要引用这些文件，此时就需要使用哈希映射（Hash Map）来实现文件名与哈希值的对应关系，这就是 hashed-map-webpack-plugin 所实现的功能。
什么是 hashed-map-webpack-plugin
hashed-map-webpack-plugin 是一个 webpack 插件，它可以将 webpack 在打包过程中生成的文件名与哈希值的映射存储到一个 JSON 文件中。这个 JSON 文件可以用于在应用启动时加载，以便在引用文件时快速找到文件名和哈希值的对应关系。
安装
你可以通过以下命令安装 hashed-map-webpack-plugin：
npm install hashed-map-webpack-plugin --save-dev
使用方法
使用 hashed-map-webpack-plugin 非常简单。只需在 webpack 的配置文件中引入插件并传入生成的 JSON 文件名即可。
-- -------------------- ---- -------
----- --------------- - -------------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- -----------------
--------- -----------------
--
-
--此时，hashed-map.json 文件会被生成在 webpack 配置文件所在的目录下，它的格式如下：
{
"main.js": "4aeefa643b2318b123f9",
"vendor.js": "3e1c8a1acb6662f5d5c5",
"runtime~main.js": "9325e6f3a6b84499818f"
}在应用启动时，通过加载 hashed-map.json 文件来获取哈希值和文件名的对应关系。
示例代码
-- -------------------- ---- -------
----- --------- - ---
-- -- --------------- --
-------------------------
-------------- -- ----------------
---------- -- -
------------------------ ------
----- ---------- - ---------------------------------
-- ---------
-------------- - ------------------------------------
----- ------------ - ---------------------------------
---------------- - --------------------------------------
--------------------------------------
----------------------------------------
---上面的代码会先通过 fetch 方法加载 hashed-map.json 文件，然后将文件中的哈希值和文件名的对应关系覆盖到 hashedMap 对象中。最后，为了引入打包后的两个 js 文件，我们需要拼接哈希值和文件名，生成实际需要引用的 js 文件路径。
结论
hashed-map-webpack-plugin 插件可以帮助我们解决在应用启动时快速找到文件名和哈希值的对应关系的问题。同时，通过了解其使用方法和源码实现，我们也可以更好地理解 webpack 的机制和其插件系统的运作方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005544481e8991b448d1941