简介
在前端开发过程中，我们常常需要借助 webpack 等工具将源代码打包成可执行的 JavaScript、CSS 等文件。然而，由于文件变动较为频繁，每次打包完毕后，为了避免缓存，我们通常会对文件名或者路径等进行修改，以便强制客户端重新下载最新的文件。
针对这个问题，@coursehero/theia-invalidate-build-manifest-cache-plugin这个 npm 包提供了一个非常方便的解决方案。该插件可以在每次构建完成后，在 build 目录下生成一个 manifest.json 的文件，记录下该次构建所生成的文件名和 hash 值等信息。在下次打包时，如果某个文件已经生成过，会根据该文件的 hash 值判断是否需要更新，以避免不必要的文件下载。
安装
你可以通过 npm 安装该插件，指令如下：
npm install --save-dev @coursehero/theia-invalidate-build-manifest-cache-plugin
安装完成后，你需要通过以下方式在 webpack.config.js 中进行配置：
-- -------------------- ---- -------
----- --------------------------------------- - --------------------------------------------------------------------
-------------- - -
-- --- -----
-------- -
-- --- ----
--- ------------------------------------------
--
--注意，此插件需要用在 webpack 的生命周期的 afterEmit 阶段，以便可以正确地生成 manifest.json 文件。因此，请确保在 webpack.config.js 中已配置了 output.filename 和 output.path 等选项。
使用
在插件默认配置下，该插件会在每次构建完毕后，在 output.path 目录下生成一个 manifest.json 文件，内容包含了每个入口打包完毕后输出的文件与其 hash 值对应关系的映射。同时，在下次构建时，将读取该文件，并且根据文件名或者路径等判断是否需要更新静态资源。
举个例子，在 myproject 目录下，我定义了一个 webpack 配置文件 webpack.config.js 如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------------------------------- - --------------------------------------------------------------------
-------------- - -
------ -
------ -----------------
------- ------------------
--
------- -
--------- --------------------------
----- ----------------------- --------
--
-------- -
--- ------------------------------------------
--
--每次运行 webpack 构建完毕后，你会在 myproject/dist 目录下看到一个 manifest.json 文件，内容如下：
{
"index.js": "c98ca2acecbe70c146b348f53b17404e",
"index.js.map": "6a11ad181100c058670a860c4a2234ee",
"detail.js": "5f5ae147032fc932f6095a5a07f52b97",
"detail.js.map": "b068f10cb23a1d9a8443e892faab64b5"
}当我们修改了 src/index.js 后重新构建时，webpack 会进行以下处理：
从 manifest.json 文件中读取上一次构建所生成的文件名和 hash 值的映射。
根据入口文件，生成新的文件输出到指定目录下，并用新的哈希值更新 manifest.json 文件。
在项目发布时，服务器不缓存带有未知哈希前缀（即文件名中未知的哈希值）的静态文件，这可以提高项目启动的速度。另外，由于每个打包后的文件名包含了其哈希值，你无需手动管理文件名或者文件路径以避免缓存。
高级用法
该插件提供了丰富的配置选项，以便你能够更好地控制构建流程。以下是该插件的所有选项：
filename：定义构建完成后生成的 cache manifest 文件名（默认为 manifest.json）。path：定义构建完成后生成的 cache manifest 文件的存储路径（默认为 output.path）。hashLength：定义哈希值长度（默认为 8）。keepOriginalManifest：是否在重新构建时保留上一次的 cache manifest 文件（默认为 false）。updateTimestamp：指定 cache manifest 文件在更新时是否更新其修改时间（默认为 true）。apply：自定义插件生效的钩子（默认为compiler）。
可以在 webpack.config.js 中以参数形式传入，如下：
new TheiaInvalidateBuildManifestCachePlugin({
filename: 'my_manifest.json',
path: path.resolve(__dirname, 'build'),
hashLength: 10,
keepOriginalManifest: true,
updateTimestamp: false,
apply: 'watch-run',
}),当你通过自定义的 apply 钩子设置插件生效时，也需要特别注意保证钩子的时机是在 afterEmit 之后，否则可能产生未知的行为。
结语
通过本文的介绍，你应该已经了解了 @coursehero/theia-invalidate-build-manifest-cache-plugin 这个 npm 包的使用方法，以及如何在项目中充分利用它的特性。在使用过程中，如果你遇到了任何问题，可以参考官方文档或者在 GitHub 上提交 issues 寻求帮助。希望我们能够通过这篇文章，帮助你更好地提高前端项目的构建效率和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66e81