webpack 中,filename 和 chunkFilename 的区别

filename

filename 是一个很常见的配置,就是对应于 entry 里面的输入文件,经过webpack打包后输出文件的文件名。比如说经过下面的配置,生成出来的文件名为 index.min.js
请添加图片描述

chunkFilename

chunkFilename 指未被列在 entry 中,却又需要被打包出来的 chunk 文件的名称。一般来说,这个 chunk 文件指的就是要懒加载的代码。

比如说我们业务代码中写了一份懒加载 lodash 的代码:

// 文件:index.js// 创建一个 button
let btn = document.createElement("button");
btn.innerHTML = "click me";
document.body.appendChild(btn);// 异步加载代码
async function getAsyncComponent() {var element = document.createElement('div');const { default: _ } = await import('lodash');element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');return element;
}// 点击 button 时,懒加载 lodash,在网页上显示 Hello! dynamic imports async
btn.addEventListener('click', () => {getAsyncComponent().then(component => {document.body.appendChild(component);})
})

我们的 webpack 不做任何配置,还是原来的配置代码:

{entry: {index: "../src/index.js"},output: {filename: "[name].min.js", // index.min.js}
}

这时候的打包结果如下:

请添加图片描述
这个 1.min.js 就是异步加载的 chunk 文件。文档里这么解释:

output.chunkFilename 默认使用 [id].js 或从 output.filename 中推断出的值([name] 会被预先替换为 [id][id].

文档写的太抽象,我们不如结合上面的例子来看:
output.filename 的输出文件名是 [name].min.js[name] 根据 entry 的配置推断为 index,所以输出为 index.min.js

由于 output.chunkFilename 没有显示指定,就会把 [name] 替换为 chunk 文件的 id 号,这里文件的 id 号是 1,所以文件名就是 1.min.js

如果我们显式配置 chunkFilename,就会按配置的名字生成文件:

{entry: {index: "../src/index.js"},output: {filename: "[name].min.js",  // index.min.jschunkFilename: 'bundle.js', // bundle.js}
}

请添加图片描述

总结

filename 指列在 entry 中,打包后输出的文件的名称。

chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/150248.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言求解猴子吃桃问题

这是一道经典的数学问题,可以使用递归或循环两种方法来解决。 递归方法: 假设第10天猴子有x个桃子吃,那么第9天猴子一定有(x 1) * 2个桃子,以此类推,可以得到第1天猴子要有多少个桃子才能保证最后剩下1个。 代码如…

使用 Splashtop 的开放 API 简化 IT 工作流程

我们的工作方式在不断变化,IT 技术人员必须迅速适应时代的变化。越来越多的公司正在转向混合和远程策略,这为那些在服务台或IT技术人员工作的人增加了额外的工作层。对于系统管理员来说,管理一切都可能变得更加复杂。 找到合适的软件来管理多…

Stable Diffusion - StableDiffusion WebUI 软件升级与扩展兼容

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/134463035 目前,StableDiffusion WebUI 的版本是 1.6.0,同步更新 controlnet、tagcomplete、roop、easy-prompt-selector等…

JDY蓝牙注意事项

波特率设置:9600,不接受115200,或者38400. 不同于WiFi测试,jdy蓝牙不接受AT"指令,可以使用“ATVERSION"指令测试 安信可公司的那个蓝牙指令在这里没有用,不知道是不是生产的公司不一样

9 Redis的发布和订阅

127.0.0.1:6379> publish topic1 jack (integer) 0 #表示此时没有被订阅,消息丢了发布订阅:发送即忘的原则,发了就不管了,没有人订阅,就丢了。 127.0.0.1:6379> subscribe topic1 Reading message ... #表示开…

产业区块链生态日:你的故事,我们在等待 | 征集帖

Hello,FISCO BCOS的朋友们,FISCO BCOS开源社区一年一度的盛会即将在12月份与大家见面啦!今年的盛会将进一步升级,以产业区块链生态日的形式,与业界共同探索区块链产业的发展现状与未来。 在生态日上,社区意…

【LeetCode】每日一题 2023_11_20 最大子数组和(dp)

文章目录 刷题前唠嗑题目:最大子数组和题目描述代码与解题思路 刷题前唠嗑 LeetCode? 启动!!! 今天是一道 LeetCode 的经典题目,如果是 LeetCode 老手,估计都刷过,话是这么说,但咱…

Python 自动化(十八)admin后台管理

admin后台管理 什么是admin后台管理 django提供了比较完善的后台数据库的接口,可供开发过程中调用和测试使用 django会搜集所有已注册的模型类,为这些模型类提供数据管理界面,供开发使用 admin配置步骤 创建后台管理账号 该账号为管理后…

简单回顾矩阵的相乘(点乘)230101

[[1 0 1][1 1 0]] [[3 0 0 3][2 2 1 3][1 3 1 1]] [[4. 3. 1. 4.][5. 2. 1. 6.]]乘以 c11 a11*b11 a12*b21 a13*b31 1*3 0*2 1*1 4 c12 a11*b12 a12*b22 a13*b32 1*0 0*2 1*3 3 c13a11*b13 a12*b23a13*b33 c14a11*b14 a12*b24a13*b34 c21a21*b11 a22*b21 a23*b…

《QT从基础到进阶·三十五》QT插件实现侧边工具栏tabBar

tabBar是用QT插件实现的一个dll,对于插件的使用可以参考文章: 《QT从基础到进阶三十三》QT插件开发QtPlugin 源码放在文章末尾 该功能类似侧边工具栏,可以在该标签栏上添加自己开发的界面,实现代码如下: 1、所有功能…

Tomcat无法映射到activiti-app导致activiti无法启动页面

原因之一:JDK版本与Tomcat版本不匹配,jdk8 yyds 我使用的是JDK11,Tomcat是9.0的,都是最新的,但还是不行,最后JDK改为8,tomcat的cmd后台没有报错,activiti-pp也可以正常访问了,很神奇…

Linux输入设备应用编程(键盘,按键,触摸屏,鼠标)

目录 一 输入设备编程介绍 1.1 什么是输入设备呢? 1.2 什么是输入设备的应用编程? 1.3 input子系统 1.4 数据读取流程 1.5 应用程序如何解析数据 1.5.1 按键类事件: 1.5.2 相对位移事件 1.5.3 绝对位移事件 二 读取 struct input_e…

ATFX汇市:欧元区10月CPI年率终值不变,EURUSD逼近1.1000心理关口

ATFX汇市:据欧盟统计局11月17日发布的数据,欧元区10月名义CPI年率终值2.9%,与10月末公布的初值持平。欧央行对通胀率的长期调控目标为2%左右,10月份名义CPI年率已经非常接近目标范围,欧央行继续加息的紧迫性降低。10月…

【AI视野·今日Robot 机器人论文速览 第六十二期】Wed, 25 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Wed, 25 Oct 2023 Totally 25 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers EquivAct: SIM(3)-Equivariant Visuomotor Policies beyond Rigid Object Manipulation Authors Jingyun Yang, Congyue Deng,…

OD机考真题搜集:不开心的小朋友

题目 游乐场里增加了一批摇摇车,非常受小朋友欢迎,但是每辆摇摇车同时只能有一个小朋友使用,如果没有空余的摇摇车,需要排队等候,或者直接离开,最后没有玩上的小朋友会非常不开心。请根据今天小朋友的来去情况,统计不开心的小朋友数量。 1.摇摇车数量为N,范围是:1≤N&…

Java的IO流-转换流

乱码问题 package com.itheima.d2;import java.io.*; import java.nio.charset.StandardCharsets;public class Test4 {public static void main(String[] args) {try (//1、创建一个文件字符输入流与源文件接通//Reader fr new FileReader("IO\\src\\itheima04.txt"…

Git企业开发级讲解(四)

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、理解分⽀二、创建分支三、切换分⽀四、合并分⽀五、删除分⽀六、合并冲突七、分⽀管理策略…

【Leetcode合集】1. 两数之和

1. 两数之和 1. 两数之和 代码仓库地址: https://github.com/slience-me/Leetcode 个人博客 :https://slienceme.xyz 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并…

三、机器学习基础知识:Python常用机器学习库(图像处理相关库)

文章目录 1、OpenCV1.1 窗口操作函数1.2 图像处理1.3 图像捕获与人脸检测 2、PIL2.1 主要函数2.2 表情图像合成2.3 手写数字转换2.4 滤波查找图像边缘 1、OpenCV OpenCV Python是一个用于解决计算机视觉问题的Python库,是用基于C实现的OpenCV构成的Python包。OpenC…

UE基础篇十:材质

导语: 视频文档在文末 虚幻引擎默认是延迟渲染(延迟渲染是通过先算出需要着色的像素,然后再迭代灯光,从而减少大量无效的灯光计算,来达到优化的目的) 一、基础知识 1.1 贴图分辨率尺寸 2的幂次方,长宽随意组合 非2的幂次方,不能设置MipMaps(引擎会生成多张分辨率更…