在前端开发中，Webpack 是一个非常受欢迎的打包工具。而在 Webpack 的打包流程中，hash 是一个重要的概念。在项目开发中，我们通常会使用 hash 来产生版本控制和缓存，但是如果我们的代码包含非常多的模块文件，那么每一个模块的 hash 都会被打包在输出文件名中，导致输出文件名非常长。这时候，我们就可以使用 split-hash-webpack-plugin 这个 npm 包来解决文件名过长的问题。
本文将为大家介绍如何使用 split-hash-webpack-plugin，实现优化代码打包的效果。
安装 split-hash-webpack-plugin
使用 npm 安装 split-hash-webpack-plugin，执行以下命令：
npm install split-hash-webpack-plugin --save-dev
使用示例
我们先来看一段 webpack 配置，打包出一个简单的样例。该配置文件只输出一个入口文件 main.js 和一个 style.css 文件。
-- -------------------- ---- -------
----- ---- - ---------------
----- -------------------- - ----------------------------------
-------------- - -
----- -------------
------ ----------------
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- ----------
---- ----------------------------- --------------
-
-
--
-------- -
--- ----------------------
--------- -------------------
--
-
-在上面的 webpack 配置中，我们可以看到输出文件的文件名使用 hash 作为版本控制。但这样会将所有模块的 hash 都添加到输出文件的文件名中，导致文件名过长。这时候我们就可以使用 split-hash-webpack-plugin 来解决这个问题。
我们在 webpack 的配置文件中添加 split-hash-webpack-plugin 作为一个插件，代码如下：
-- -------------------- ---- -------
----- ---- - ---------------
----- -------------------- - ----------------------------------
----- ---------------------- - ------------------------------------
-------------- - -
----- -------------
------ ----------------
------- -
----- ----------------------- --------
--------- -----------------------
--
------- -
------ -
-
----- ----------
---- ----------------------------- --------------
-
-
--
-------- -
--- ----------------------
--------- --------------------------
---
--- ------------------------
----- - -- ---- --
--
-
-在上面的配置文件中，我们添加了 SplitHashWebpackPlugin 插件作为一个插件，并且修改了文件名中 hash 的使用方式，使用 chunkhash 替代 hash 作为版本控制。
同时，我们在 SplitHashWebpackPlugin 插件中定义了一个 size 参数，这个参数用来设置每个文件名中 hash 的数量。例如上面的代码中，我们设置了每个文件名中包含 5 个 hash，最终输出的文件名类似于：main.12345.js
效果验证
验证我们的 webpack 配置文件是否配置成功，我们需要重新打包一下项目，并查看打包输出的文件名是否包含指定数量的 hash。
执行以下命令：
webpack --config webpack.config.js
打包完成后，我们可以看到在 dist 目录下，生成了一个名为 main.xxxxx.js 的文件，并且不包含所有模块的 hash。
总结
本文为大家介绍了如何使用 split-hash-webpack-plugin 来解决 Webpack 打包过程中文件名过长的问题。我们可以在 webpack 的配置文件中，添加 split-hash-webpack-plugin 作为一个插件，并设置一个 size 参数来表示每个输出文件名中 hash 的数量。
本插件的使用实现了优化打包过程，减少了输出文件名的长度，同时也为未来的版本控制和缓存提供了良好的支持。希望本文的介绍对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056fd381e8991b448e7bad