在前端开发中，Webpack 是一个常用的打包工具。在使用 Webpack 进行打包时可能会遇到一个问题，就是在每次打包之后，会产生新的 chunk 和 hash 值。这会导致浏览器缓存失效，每次都需要重新下载文件，影响用户体验和网站性能。
要解决这个问题，可以使用 webpack-hashed-module-id-plugin 插件。这个插件可以为 Webpack 生成的模块 ID 使用基于模块内容 hash 的稳定 ID，从而保证模块 ID 的稳定性。这样一来，即使模块的内容没有发生改变，生成的模块 ID 也不会改变，因此会产生相同的 hash 值，从而达到缓存效果。
插件安装
在使用 webpack-hashed-module-id-plugin 插件之前，需要先安装它。可以使用 npm 来安装。在命令行中输入以下命令即可：
npm install --save-dev webpack-hashed-module-id-plugin
插件配置
安装完成之后，就可以在 webpack.config.js 文件中进行配置。
首先，需要在 webpack 配置文件中引入插件：
const WebpackHashedModuleIdsPlugin = require("webpack-hashed-module-id-plugin");然后，可以在 plugins 数组中添加该插件的实例，如下：
plugins: [
new WebpackHashedModuleIdsPlugin()
]如果希望对所有生成的 chunk 都使用 hashed module id，可以在 output 对象中添加以下配置：
output: {
chunkFilename: "[name].[chunkhash].[contenthash].js"
}示例代码
-- -------------------- ---- -------
----- ---------------------------- - -------------------------------------------
-------------- - -
----- -------------
------ -
----- ----------------
--
------- -
--------- --------------------------------------
-------------- -------------------------------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
--
-------- -
--- ------------------------------
-
--以上示例代码中，使用了 Webpack 中常用的一些配置，包括 entry，output，module 和 plugins。其中：
entry指定了入口文件，即src/index.js。output指定了输出文件，包括文件名和chunk文件名。其中，文件名包括name、chunkhash和contenthash三个部分。module中指定了使用babel-loader对.js文件进行转换。plugins数组中添加了WebpackHashedModuleIdsPlugin插件的实例。
总结
本文介绍了 npm 包 webpack-hashed-module-id-plugin 的使用方法，包括插件的安装和配置，同时还提供了示例代码。这个插件可以为 Webpack 所生成的模块 ID 使用基于模块内容 hash 的稳定 ID，让模块 ID 保持稳定，从而达到缓存效果，提升网站性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587a81e8991b448d5bd2