本文介绍在 Webpack 4 中如何利用 magic comments 实现动态切割 JS 文件并注入实际文件名。通过 [request] 占位符替代默认索引，使生成的 chunk 文件具有可读性，提升资源加载的清晰度与管理效率。
Webpack 4 动态切割 JS 注入文件名详解
引言部分
昨日对公司引流页面实施二次封装时，遭遇一项技术难题。
探讨在Webpack执行代码分割时，如何添加随文件名动态变化的前缀。
效果展示图
解决方案路径
- 搜索引擎辅助结合Webpack官方文档查阅
官方文档确实提供了相关说明，具体如下
核心机制在于利用[request]获取实际解析的文件名，从而替代默认的递增索引策略。
具体代码实现
相关API参考官方文档：【magic-comments】
// 注册
const IntroRegister = categoryName => {
return () => import(/* webpackChunkName:"[request]" */ `@/views/${categoryName}/intro-register/intro-register.vue`);
};结论概述
此举实现了文件分割目标，且加载资源文件名清晰可见，优于默认的0.js、1.js等无意义命名。
以上为本文全部内容，期望对读者的学习或工作有所助益，感谢支持。