前言
基于 webpack 打包构建前端项目时，开发人员经常会遇到 chunk 之间的 ID 有冲突的问题，导致生产环境下会出现错误或者异常。解决这个问题可以用修改 ID 的方式，从而使得不同的 chunk 都有独特的 ID。npm 中存在多个解决这个问题的插件，其中一个比较好的插件就是 modify-chunk-id-webpack-plugin。
安装
可以通过 npm 直接安装该插件：
npm install --save-dev modify-chunk-id-webpack-plugin
使用说明
在 webpack 配置文件中引入该插件并在 plugins 中实例化即可，代码如下：
-- -------------------- ---- -------
----- -------------------------- - ------------------------------------------
-------------- - -
-- ------- --
-------- -
--- ----------------------------
---------- ---
------- ------------------
--
-
-配置项说明
maxLength: 新 ID 的最大长度，默认为 4，如果新的 ID 超出该长度则会被截断。format: 新 ID 的格式，其中[id]会被替换成模块 ID，[hash:8]会被替换成模块内容的 hash 值（去掉前 8 位）。
示例代码
在演示代码示例中，我们新建一个简单的 webpack 项目，并通过 modify-chunk-id-webpack-plugin 插件来调整模块 ID。具体的步骤如下：
- 创建一个名为 modify-chunk-id-webpack-plugin-demo 的文件夹，然后在该文件夹下执行以下命令来初始化一个 webpack 项目：
npm init -y npm install --save-dev webpack webpack-cli
- 创建一个 webpack.config.js 文件，配置入口和输出，同时引入并使用 modify-chunk-id-webpack-plugin 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------------------- - ------------------------------------------
-------------- - -
------ -
----- -----------------
------- -------------------
--
------- -
--------- --------------------------
----- ----------------------- -------
--
-------- -
--- ----------------------------
---------- ---
------- ------------------
--
-
--- 新建 src 目录，然后在该目录下新建 index.js 和 vendor.js 两个文件，代码如下：
index.js
console.log('This is the main entry point.');vendor.js
console.log('This is the vendor entry point.');- 最后在 package.json 文件中添加以下命令，用于启动打包：
"scripts": {
"build": "webpack"
}- 运行
npm run build命令，可以看到生成的文件名会根据新的规则生成，如下所示：
dist/vendor.d9990706.js dist/main.b9251b84.js
总结
在实际开发中，如果遇到 webpack 打包构建中 chunk ID 冲突的问题，可以通过 modify-chunk-id-webpack-plugin 插件来解决，该插件简单易用，同时提供了扩展性配置，可以根据需要灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac672d8