Webpack 4 动态切割 JS 注入文件名详解

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等无意义命名。

以上为本文全部内容，期望对读者的学习或工作有所助益，感谢支持。