在前端开发中，使用 webpack 进行代码打包是一个非常好的选择。但是在实际开发过程中，经常会遇到需要替换 webpack 输出的打包文件中的 chunkhash 或 contenthash 的需求。为了解决这个问题，推荐使用一个非常实用的 npm 包：webpack-replace-chunkhash-contenthash。
npm 包介绍
webpack-replace-chunkhash-contenthash 是一个非常实用的 npm 包，可以用于自动替换 webpack 打包文件中的 chunkhash 或 contenthash。在前端开发中，使用 chunkhash 或 contenthash 是一种非常好的方式保证缓存的有效性。但是如果我们需要手动替换打包文件中的这些 hash，那么将会是一项非常繁琐的工作。这时候就需要使用 webpack-replace-chunkhash-contenthash 这个工具了。
包说明
这个 npm 包非常简单易用，只需要在 webpack 的配置文件中引入这个包，就可以自动替换文件名中的 chunkhash 或 contenthash 了。更为重要的是，这个包还支持多个入口，可以通过参数配置来实现不同的替换需求。
使用教程
步骤一：安装依赖包
在使用 webpack-replace-chunkhash-contenthash 之前，我们需要先安装此工具的依赖包。打开终端（Terminal）,使用以下命令：
npm install --save-dev webpack-replace-chunkhash-contenthash
步骤二：引入包
在 webpack 的配置文件中引入该包：
const ReplaceHashWebpackPlugin = require('webpack-replace-chunkhash-contenthash');步骤三：配置 webpack 插件
接下来，我们需要在 webpack 的配置文件中为该包添加一个插件：
-- -------------------- ---- -------
-------- -
--- --------------------------
----------- -
---- -
------------------------
-----------------------
-
-
--
-以上代码中，entryFiles 表示需要用 new hash 替换的文件列表。可以配置多个入口文件，然后分别配置不同的 hash 值，来满足不同的需求。
步骤四：打包项目
在完成以上配置后，使用 webpack 打包你的项目时，webpack-replace-chunkhash-contenthash 会自动替换文件名中的 chunkhash 或 contenthash，来满足你的需求。
使用示例
下面是一个简单的使用示例，以便大家更好地理解 webpack-replace-chunkhash-contenthash 的使用方式。
webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------------------------ - -------------------------------------------------
-------------- - -
------ -
---- -----------------
--
----- --------------
------- -
--------- --------------------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ -------------------------------------- ---------
---
--- --------------------------
----------- -
---- -
---------------
-
-
--
--
---------- -
------------ ---------
--
--这里我们简单地配置了一个 webpack 项目，使用 HtmlWebpackPlugin 插件生成一个 html 文件，并使用 ReplaceHashWebpackPlugin 替换静态文件中的 hash 值。
src/index.js
console.log('hello webpack');这是一个简单的前端代码示例，其中 console.log('hello webpack') 表示在控制台输出一个字符串。
打包项目
在完成以上代码配置后，我们就可以使用 webpack 对项目进行打包了。在终端中输入以下命令：
npx webpack
在打包之后，webpack-replace-chunkhash-contenthash 会自动替换文件名中的 hash 值，生成一个新的打包文件：dist/app.[newContentHash].js。
总结
本文介绍了如何使用 npm 包 webpack-replace-chunkhash-contenthash 来替换 webpack 打包文件中的 chunkhash 或 contenthash。从上面的教程中可以看出，使用 webpack-replace-chunkhash-contenthash 的过程非常简单，只需要在 webpack 的配置文件中添加一些简单的配置即可。如果你遇到过手动替换 hash 的问题，那么不妨尝试一下这个实用的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664481e8991b448e2576