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 相关文章推荐
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
简单实现js浮动框
Dec 13 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
基于Require.js使用方法(总结)
Oct 26 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
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 Ajax中文乱码问题解决方法
2009/02/27 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
javascript实现数独解法
2015/03/14 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python编程之string相关操作实例详解
2017/07/22 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python isinstance函数用法详解
2020/02/13 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
节水倡议书
2015/01/19 职场文书
岗位聘任协议书
2015/09/21 职场文书
财务人员入职担保书
2015/09/22 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书