介绍
webpack-plugin-hash-output 是一个 webpack 插件，可以在项目打包的时候自动生成文件版本号，避免缓存导致的问题。这个插件把 hash 值作为文件名的一部分，然后可以根据 hash 字段来判断是否需要重新加载该文件。
使用这个插件可以让你的前端项目更加稳定、可靠，提高用户体验。
安装
使用 npm 安装：
npm install webpack-plugin-hash-output --save-dev
使用
在 webpack 的配置文件中使用这个插件：
const HashOutputPlugin = require('webpack-plugin-hash-output');
module.exports = {
plugins: [
new HashOutputPlugin()
]
};这个插件默认会将 hash 值插入到输出文件名的后缀中。比如一个文件名为 app.js，生成的带有 hash 值的文件名可能是 app.ebae1aae.js。
你可以通过在每次构建时给 webpack 指定不同的环境变量（如 NODE_ENV）来在文件名中添加 hash 值：
-- -------------------- ---- -------
----- -------- - -------------------- -- --------------
----- ---------------- - --------------------------------------
-------------- - -
-------- -
--- ------------------
--------- -------- --- ------------ - ----------------------- - ------------
------------------ ----
--
-
--在这个例子中，当 NODE_ENV 为 production 时，文件名中将包括 chunkhash 值。而在开发环境下，不会添加 chunkhash 值。
配置项
filename
- Type: String
- Default: '[name].[hash].js'
输出的文件名。支持以下占位符：
- [name] 文件名
- [hash] 文件内容的 md5 值
- [chunkhash] chunk 内容的 md5 值
- [contenthash] 文件内容的 sha256 值
suppressChunkHash
- Type: Boolean
- Default: false
默认情况下，输出文件名中会包含 chunkhash 值。如果你不需要 chunkhash 值，可以将这个选项设为 true。
示例代码
下面是一个完整的 webpack 配置文件示例：
-- -------------------- ---- -------
----- -------- - -------------------- -- --------------
----- ---------------- - --------------------------------------
-------------- - -
------ -
---- ------------
--
------- -
----- --------- - --------
--------- -------- --- ------------ - ----------------------- - -----------
--
-------- -
--- ------------------
--------- -------- --- ------------ - ----------------------- - ------------
------------------ ----
--
-
--结束语
webpack-plugin-hash-output 提供了一种简便的方式来自动生成文件版本号。使用它可以让你的前端项目更加稳定、可靠，提高用户体验。希望这篇文章能帮助大家快速上手使用这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62122