webpack知识点

什么是webpack

webpack是一个模块打包器。通过使用webpack,我们可以将JavaScript文件打包在一起,打包后的文件可以在浏览器中使用

webpack的原理是什么

webpack读取相关配置,根据入口开始便利文件,解析依赖,使用loader处理各个模块,然后将文件打包成bundle后输出到output指定的目录中。
entry:一个可执行模块或者库的入口。
chunk: 多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组成一个chunk,这是打包。
loader:文件转换器。例如把es6转化为es5,scss转为css等。
plugin: 拓展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook,添加功能。
output:编译结果文件的输出位置

webpack的构建流程

Webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
1.参数初始化: 解析webpack配置参数,其中包含了shell传入的参数和webpack.config.js文件配置的参数,将其合并得到最终的配置结果。
2.开始编译:在上一步的参数初始化compiler对象,注册所有配置的插件,插件监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的run方法开始执行编译。
3. 确定入口:从配置的entry入口,开始解析文件并构建AST语法树,找出依赖,递归下去。
4. 编译模块:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了编译处理。
5. 完成模块编译:在经过使用Loader翻译完成所有模块之后,得到了每个模块被翻译后的最终内容以及他们之间的依赖关系。
6.输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表,这一步是可以修改输出内容的最后内容。
7.输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把内容写入到文件系统。

Chunk是什么

Chunk在webpack中代指一个代码块或数据块,是webpack在打包过程中,一个模块或一组模块的集合。可以分为两种:

1.非初始化的

例如在打包中,对于一些动态导入的异步代码,webpack会帮我们分割出公用的代码,可以是自己的代码,也可以是第三方库(node_modules文件夹里的)这些被分割的代码文件我们可以理解为chunk

2.初始化的

我们在使用webpack进行打包的时候是从一个入口文件开始的,这构成了一连串模块引用关系。webpack通过引用关系逐个打包模块,这些模块(module)经过编译在编译过程中就初步形成了一个Chunk。
如果我们有多个入口文件,可能会产生多个打包路径,一条打包路径就会形成一个Chunk。

model是什么

model即不同文件类型的模块。webpack就是对模块进行打包的工具,这些模块各式各样,如js模块,css模块,sass模块,vue模块等等。这些模块文件都可以通过loader转换为对webpack有效的代码模块,然后被应用所使用并添加到依赖图中。

Bundle是什么

Bundle是webpack打包后输出的一个或多个最终的打包文件。大多数情况下,一个Chunk产生一个Bundle,但有时候并不是一对一的关系

1.Chunk是开发阶段的概念,在编译过程中生成。代表一组有依赖关系的模块。
2.Bundle是生产阶段的概念,有Webpack对Chunk进行进一步处理和优化后生成的最终的输出文件
3.Chunk的划分是自动进行的,Webpack根据模块之间的依赖关系和其他配置信息来生成Chunk,而Bundle则需要显式指定入口点。
4.在使用代码分割(code splitting)功能时,webpack可以将一个大的Chunk分割乘多个小的Chunk,从而实现按需加载(lazy loading).最终打包生成的Bundle也会相应的被拆分为多个文件,每个文件对应一个Chunk

产生Chunk的三个途径

1.entry入口
2.异步加载模块
3.代码分割(code spliting)

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

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

相关文章

论文阅读:ECAPA-TDNN

1. 提出ECAPA-TDNN架构 TDNN本质上是1维卷积,而且常常是1维膨胀卷积,这样的一种结构非常注重context,也就是上下文信息,具体而言,是在frame-level的变换中,更多地利用相邻frame的信息,甚至跳过…

windows系统安装openssl并且转换证书格式

概述 碎碎念,如果你有MAC电脑,就别折腾了,直接用MAC电脑吧,不用安装直接用openssl 本文主要讲到了openssl的基本使用方法,开发环境为windows,开发工具为VS2019.本文主要是说明openssl如何使用,不介绍任何理…

11-网络篇-DNS步骤

1.URL URL就是我们常说的网址 https://www.baidu.com/?from1086k https是协议 m.baidu.com是服务器域名 ?from1086k是路径 2.域名 比如https://www.baidu.com 顶级域名.com 二级域名baidu 三级域名www 3.域名解析DNS DNS就是将域名转换成IP的过程 根域名服务器&#xff1a…

【计算机组成体系结构】移码 | 定点小数的表示和运算

一、移码 上篇我们提到了原码,反码和补码的表示形式和如何转换。这篇我们会提到一个新的概念—移码。移码也很简单,其实就是在补码的基础上把符号取反即可。 值得注意的是,移码只能表示整数。而原码,反码和补码既可以表示整数又…

【C++入门】命名空间详解(从零开始,冲击蓝桥杯)

C入门 命名空间 南喵小鸡汤程序员可以让步,却不可以退缩,可以羞涩,却不可以软弱,总之,程序员必须是勇敢的。一 . 命名空间的介绍二.命名空间的实际应用1.为什么要有命名空间我们在使用变量时,通常会为他定义一个名字,在…

pycharm连接gitlab

1、下载安装gitlab 下载地址:Git - Downloading Package 下载后傻瓜式安装,注意勾选配置环境变量 未配置自己配置,电脑-属性-高级系统配置-环境变量 系统变量path:添加git安装目录下bin目录 2、检验安装完成 桌面右键git-open…

物联网AI MicroPython传感器学习 之 TEA5767 FM收音机模块

学物联网,来万物简单IoT物联网!! 一、产品简介 TEA5767 FM收音机模块是工作频率在76MHz~108MHz的自动数字调谐收音机。其特点高灵敏度、高稳定、低噪声,内部集成了中频选频和解调网络。 引脚定义 GND:接…

组件自定义事件

组件自定义事件是一种组件间通信的方式,适用于:子组件 > 父组件 使用场景 A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。 绑定自定义事件&#x…

Java对象的比较

目录 PriorityQueue中插入对象 元素的比较 基本类型的比较 对象比较问题 对象的比较 覆写基类的equals 基于Comparble接口类的比较 基于比较器的比较 三种方式的对比 集合框架中PriorityQueue的比较方式 PriorityQueue中插入对象 上一篇博文中我们讲了优先级队列&#…

虚幻引擎:数据表格的C++常用API

1.将数据表格中的所有数据存到一个数组中 //参数1 // 错误提示 //参数2 // 存储的数组 TArray<FKeyInfoHeader*> array; KeyInfoDT->GetAllRows<FKeyInfoHeader>(TEXT("错误"),array); 2.获取表格中所有的行名称 TArray<FName>array; …

golang 拉取 bitbucket.org 私有库

以 bitbucket.org 平台和mac电脑为例 前置条件私库需要给你账号权限&#xff0c;可拉取的权限&#xff0c;否则无法进行正常拉取 我们采用ssh方式&#xff0c;需要在本地生成对应的 rsa 的公钥和私钥&#xff0c;将公钥配置如下图&#xff1a; 在 .ssh/config 写入你的配置 H…

2015架构案例(五十一)

第5题 【说明】某信息技术公司计划开发一套在线投票系统&#xff0c;用于为市场调研、信息调查和销售反馈等业务提供服务。该系统计划通过大量宣传和奖品鼓励的方式快速积累用户&#xff0c;当用户规模扩大到一定程度时&#xff0c;开始联系相关企业提供信息服务&#xff0c;并…

Codeforces Round 903 (Div. 3) C(矩形旋转之后对应的坐标)

题目链接&#xff1a;Codeforces Round 903 (Div. 3) C 题目&#xff1a; 思想&#xff1a; 旋转之后对应的坐标&#xff1a; &#xff08;i&#xff0c;j&#xff09;&#xff08;n1-j&#xff0c;i&#xff09;&#xff08;n1-i&#xff0c;n1-j&#xff09;&#xff08;j…

浅谈MDK, IAR,CLANG和GCC的局部变量字节对齐处理差异(2023-10-13)

视频&#xff1a; https://www.bilibili.com/video/BV1CB4y1Z7kA 浅谈MDK, IAR, CLANG和GCC的局部变量字节对齐处理差异 问题由来&#xff1a; 早期这个帖子里面的局部变量对齐仅测试了MDK AC5&#xff0c;但项目中使用AC6发现了新问题&#xff0c;看来AAPCS规约研究的还是不…

ArcGIS笔记4_水动力模型验证不理想时如何修改局部水深地形

本文目录 前言Step 1 模型验证不理想的情况Step 2 修改确值点并重新插值 前言 本章主要服务于MIKE水动力模型的调整修改工作。水动力模型跑完之后&#xff0c;常常会出现验证结果不理想的情况&#xff0c;比如潮位验证中&#xff0c;实测站点数据与模拟数据相差很大&#xff0…

苹果ios用户下载ipa文件内测签名的后的app应用下载安装到手机图标消失了-解决方案

下载好的应用竟然找不到了&#xff1f;这么神奇&#xff1f;我尝试了解了一下复原了同学给我的内容果然出现了我尝试科技了一下&#xff0c;总结了以下的可能性&#xff01;同学如果这个回答解决了你的困扰&#xff0c;同学给个赞&#xff0c;如果你有更好的排查方案评论区分享…

Modelsim查看波形窗口内断言(SVA)消息指示器

步骤1&#xff1a;创建工程并编译完成 在相应目录下创建好工程并编译无错误后&#xff1b; 步骤二&#xff1a; 在菜单栏中选择“Simulate”—>“Start Simulation”—>“Others”,在“Others Vsim Options”中输入 -msgmode both -displaymsgmode both 步骤三&#xf…

UI自动化测试 —— Jenkins配置

前一段时间帮助团队搭建了UI自动化环境&#xff0c;这里将Jenkins环境的一些配置分享给大家。 背景&#xff1a; 团队下半年的目标之一是实现自动化测试&#xff0c;这里要吐槽一下&#xff0c;之前开发的测试平台了&#xff0c;最初的目的是用来做接口自动化测试和性能测试&…

SQL Server远程登录失败

SQL Server远程登录失败 检查SQL SERVER 是否允许远程访问. 具体步骤: 1)在远端SQL Server主机上,打开SSMS并连接数据库 2)在相应”数据库”上单击右键,选择”属性” 3)选择”连接”选项卡,检查”远程服务器连接”下,RPC服务是否选择. 设置SQL Server相关TCP连接 1.打开SQL Se…

下载Python的不同版本在同一台电脑上如何共存

1. 下载安装不同版本的Python 官网下载&#xff1a;https://www.python.org/downloads/安装自己需要的版本&#xff08;我这里以Python3.6和Python3.9为例&#xff0c;下载安装细节不过多赘述&#xff09; &#xff08;这里的安装路径自己设定&#xff0c;命名最好是根据下载…