webpack中动态import()打包后的文件名称定义
时间:2022-07-27
本文章向大家介绍webpack中动态import()打包后的文件名称定义,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
动态import()
打包出来文件的name是按照0,1,2...
依次排列,如0.js
、1.js
等,有的时候我们希望打包出来的文件名是打包前的文件名称。要实现这,需要经历3个步骤:
1.在webpack
配置文件中的output
中添加chunkFilename
。命名规则根据自己的项目来定,其中[name]
就是文件名,这一块更详细的说明请点击这里。
//其他代码...
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name].[hash:8].js',
chunkFilename: '[name].[hash:8].js',//动态import文件名
},
//其他代码...
2.在动态import()
代码处添加注释webpackChunkName
告诉webpack打包后的chunk的名称(注释中的内容很重要,不能省掉),这里打包以后的name就是MyFile。
import(/* webpackChunkName: "MyFile" */`../containers/MyFile`)
3.大多数情况下我们使用动态import()
是通过循环来做的,这样我们就不得不引入变量了,使用[request]
来告诉webpack,这里的值是根据后面传入的字符串来决定,本例中就是变量pathName
的值,具体如下:
import(/* webpackChunkName: "[request]" */`../containers/${pathName}`)
- 3390: [Usaco2004 Dec]Bad Cowtractors牛的报复
- 1684: [Usaco2005 Oct]Close Encounter
- 算法模板——Dinic最小费用最大流
- 算法模板——Dinic网络最大流 1
- SQL Server 使用全文索引进行页面搜索
- 2764: [JLOI2011]基因补全
- 1000: A+B Problem(NetWork Flow)
- 博弈论进阶之Multi-SG
- 2929: [Poi1999]洞穴攀行
- SQL Server 执行计划缓存
- 1081: [SCOI2005]超级格雷码
- 1715: [Usaco2006 Dec]Wormholes 虫洞
- 博弈论入门之斐波那契博弈
- 3018: [Usaco2012 Nov]Distant Pastures
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PDO::exec讲解
- 使用keras框架cnn+ctc_loss识别不定长字符图片操作
- PHP实现的策略模式示例
- 浅谈pytorch中torch.max和F.softmax函数的维度解释
- 用PHP的反射实现委托模式的讲解
- PHP时间函数使用详解
- python批量处理多DNS多域名的nslookup解析实现
- PHP单例模式数据库连接类与页面静态化实现方法
- pytorch 常用函数 max ,eq说明
- 解析python 中/ 和 % 和 //(地板除)
- python右对齐的实例方法
- PHP的PDO预处理语句与存储过程
- PHP工厂模式的日常使用
- 使用ucenter实现多站点同步登录的讲解
- 实例讲解PHP验证邮箱是否合格