Webpack 4如何动态切割JS注入文件名详解
2019-07-09 14:40
1926 查看
前言
昨天重新把我们公司的引流页做了二重封装,遇到一个问题。
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
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- 详解如何使用webpack打包JS
- webpack.config.js 参数详解
- 详解如何使用webpack打包Vue工程
- 详解JS: reduce方法实现 webpack多文件入口
- 详解如何webpack使用DllPlugin
- webpack.config.js 参数详解
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- 详解如何使用node.js的开发框架express创建一个web应用
- 详解webpack 如何集成第三方js库
- Vue.js学习之使用Webpack加速应用的方式详解
- 详解如何使用webpack在vue项目中写jsx语法
- webpack-dev-conf r.js文件,如何进行后台数据模拟?
- (node.js)webpack打包报javaScript heap out of memory,内存溢出,如何解决
- 详解如何在webpack中做预渲染降低首屏空白时间
- 如何降低Vue.js项目中Webpack打包文件的大小?
- webpack打包单页面如何引用的js
- webpack 打包时到底如何组织js
- webpack如何使用webpack-dev-middleware进行热重载(详解)
- webpack.config.js 参数详解
- Webpack创建、运行vue.js项目及其目录结构详解