简介
对于前端开发者来说，Webpack 是一个十分重要的工具。同时，随着应用程序的复杂度越来越高，Webpack 插件也越来越多。其中，webpack-hashed-chunkids 是一个十分有用的插件，它可以生成 hash 的 ID，从而优化浏览器缓存。
安装
在安装 webpack-hashed-chunkids 之前，确保你已经安装好了 Webpack，并且你已经初始化了你的项目：
npm init
运行下面的指令安装 webpack-hashed-chunkids 以及它的依赖：
npm install --save-dev webpack-hashed-chunkids
使用
- 在你的 Webpack 配置文件中引入 webpack-hashed-chunkids：
const WebpackHashedChunkIds = require('webpack-hashed-chunkids');- 在你的 Webpack 插件列表中加入 webpack-hashed-chunkids：
plugins: [ new WebpackHashedChunkIds() ]
- 然后重新构建你的项目：
npm run build
示范
在下面的示例中，我们将创建一个简单的项目，并使用 webpack-hashed-chunkids 来生成 hash 的 ID 并进行优化。
- 首先，创建一个新的目录，然后在命令行中进入该目录并创建一个新的 npm 项目：
mkdir my-project cd my-project npm init
- 接下来，安装 Webpack 和 webpack-hashed-chunkids：
npm install --save-dev webpack webpack-cli webpack-hashed-chunkids
- 在项目根目录中创建一个名为 “src” 的文件夹，并在其中添加一个名为 “index.js”的新文件。将以下代码添加到该文件中：
console.log('Hello webpack!');- 现在，我们需要在项目根目录下创建一个名为 “webpack.config.js”的文件，并将以下代码添加到文件中：
-- -------------------- ---- -------
----- --------------------- - -----------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- -------------------------
--
------------- -
--------- -----
------------ -
------- -----
-
--
-------- ---- ------------------------
--在上面的代码中，我们指定了入口点，输出文件的文件名，以及 optimization.splitChunks 配置。除此之外，我们还向 plugins 列表中添加了 webpack-hashed-chunkids 插件。
- 最后，我们可以将一个新的 “build” 脚本添加到项目的 “package.json”文件中：
"scripts": {
"build": "webpack"
}- 现在，我们只需要在命令行中运行以下命令来构建我们的项目：
npm run build
该命令将构建你的项目，并将生成的带有 hash 的 ID 添加到你的文件名中。
结论
现在你已经知道如何使用 webpack-hashed-chunkids 来生成 hash 的 ID 并进行优化。通过对 Webpack 插件的了解，你可以更好地构建更快、更可靠的应用程序。最后，我们希望这篇使用教程对于你的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005724f81e8991b448e8623