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


Posted in Javascript onJuly 09, 2019

前言

昨天重新把我们公司的引流页做了二重封装,遇到一个问题。

webpack 切割的时候如何加个可以跟随文件名变化的前缀。

效果图

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

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

解决路径

  • GG大法+ webpack官方文档

官方文档还真的有提供对应的知识,说明如下

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

大体就是就是 [request] 可以拿到实际解析的文件名,来取代默认的索引递增的方式。

代码实现

对应的API官方文档:【magic-comments】

// 注册
const IntroRegister = categoryName => {
 return () => import(/* webpackChunkName:"[request]" */ `@/views/${categoryName}/intro-register/intro-register.vue`);
};

总结

这样做的好处就是文件切割目的达到了,加载的资源文件也清晰,有名字一目了然,而非默认的 0.js,1.js

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
js实现拖动缓动效果
Jan 13 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 #Javascript
微信小程序文章详情页跳转案例详解
Jul 09 #Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 #Javascript
js实现无缝滚动双图切换效果
Jul 09 #Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 #Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 #Javascript
bootstrap datepicker的基本使用教程
Jul 09 #Javascript
You might like
php实现递归与无限分类的方法
2015/02/16 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Python sys.path详细介绍
2013/10/17 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Django 开发环境配置过程详解
2019/07/18 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
房地产推广策划方案
2014/05/19 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
公司董事长岗位职责
2014/06/08 职场文书
大学生简历求职信
2014/06/24 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
python内置模块之上下文管理contextlib
2022/06/14 Python