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 相关文章推荐
jQuery中调用WebService方法小结
Mar 28 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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 日志缩略名的创建函数代码
2010/05/26 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue实现通讯录功能
2018/07/14 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python机器学习之神经网络实现
2018/10/13 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
中专生自我鉴定范文
2014/02/02 职场文书
食品销售计划书
2014/04/26 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Vue监视数据的原理详解
2022/02/24 Vue.js