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

简介: 昨天重新把我们公司的引流页做了二重封装,遇到一个问题。webpack 切割的时候如何加个可以跟随文件名变化的前缀。


前言


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

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

效果图




解决路径


  • GG大法+ webpack官方文档


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



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

代码实现


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


// 注册
const IntroRegister = categoryName => {
  return () => import(/* webpackChunkName:"[request]" */ `@/views/${categoryName}/intro-register/intro-register.vue`);
};
目录
相关文章
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
54 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
4月前
|
JavaScript 前端开发 网络协议
抖音直播弹幕数据逆向:websocket和JS注入
抖音直播弹幕数据逆向:websocket和JS注入
428 1
|
4月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
52 0
|
5月前
|
JavaScript Windows
安装node.js与webpack创建vue2项目
安装node.js与webpack创建vue2项目
39 1
|
5月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
34 0
|
5月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
48 1
|
5月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
103 1
|
6月前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
98 3
|
5月前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
|
5月前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用