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

更新时间：2019年07月09日 14:40:57 作者：CRPER

这篇文章主要给大家介绍了关于Webpack 4如何动态切割JS注入文件名的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Webpack4具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

前言

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

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

效果图

解决路径

GG大法+ webpack官方文档

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

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

代码实现

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

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

总结

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

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

您可能感兴趣的文章:

JavaScript 事件参考手册
对于js的一些常见事件的总结
2008-12-12
js实现拖拽功能
本文主要介绍了js实现拖拽效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
仅用[]()+!等符号就足以实现几乎任意Javascript代码
仅用一些符号就足以实现几乎任意Javascript代码的方法，比较怪异，对于特殊需要可能用得到。
2010-03-03
TypeScript接口使用介绍
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法
2022-10-10
JavaScript命名空间模式实例详解
这篇文章主要介绍了JavaScript命名空间模式,结合实例形式分析了javascript命名空间模式的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
2019-06-06
js中的referrer返回上一页使用介绍
js中的referrer想必大家并不陌生吧，在本文将为大家详细介绍其是如何使用的，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-09-09
javascript里使用php代码实例
这篇文章主要介绍了javascript里使用php代码的方法,以实例形式展示了javascript与php代码混编的应用技巧,非常具有实用价值,需要的朋友可以参考下
2014-12-12
js 使用方法与函数总结
js使用方法小结，比较不错，无论是新手，还是老手都是不错的。
2009-05-05
JavaScript实现网页跨年倒计时
这篇文章主要为大家详细介绍了JavaScript实现网页跨年倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
纯javascript实现简单下拉刷新功能
这篇文章主要介绍了纯javascript实现简单下拉刷新功能,没有借助任何的框架，十分简单实用，有需要的小伙伴来参考下吧。
2015-03-03