webpack编译过程
webpack的作用是将源代码编译(构建、打包)成最终代码。整个过程大致分为三个步骤:初始化、编译、输出。
1.初始化
在该阶段,webpack会将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象。对配置的处理过程是依托一个第三方库yargs完成的。此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备。目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置
2.编译
1)创建chunk
chunk是webpack在内部构建过程中的一个概念,译为:块,表示通过某个入口找到的所有依赖的统称。每个chunk至少有两个属性:
A)name,默认为main;
B)id,唯一编号,开发环境和name相同,生产环境是一个数字,从0开始
2)构建所有依赖模块
3)产生chunk assets
在第二步完成后,chunk中会产生一个模块列表,列表中包含了模块id和模块转换后的代码 。接下来,webpack会根据配置为chunk生成一个资源列表,即chunk assets,资源列表可以理解为是生成到最终文件的文件名和文件内容
hash:一种算法,具体有很多分类,特点是将一个任意长度的字符串转换为一个固定长度的字符串,而且可以保证原始内容不变,产生的hash字符串就不变。
chunk hash是根据所有chunk assets的内容生成的一个hash字符串。
4)合并chunk assets
将多个chunk的assets合并到一起,并产生一个总的hash
3.输出
webpack将利用node中的fs模块(文件处理模块),根据编译产生的总的assets,生成相应的文件
4.涉及术语
1)module:模块,分割的代码单元,webpack中的模块可以是任何内容的文件,不仅限于JS
2)chunk:webpack内部构件模块的块,一个chunk中包含多个模块,这些模块是从入口模块通过依赖分析得来的
3)bundle:chunk构建好模块后会生成chunk的资源清单,清单中的每一项就是一个bundle,可以认为bundle就是最终生成的文件
4)hash:最终的资源清单所有内容联合生成的hash值
5)chunkhash:chunk生成的资源清单内容联合生成的hash值
6)chunkname:chunk的名称。如果没有配置则使用main
7)id:通常指chunk的唯一编号,如果在开发环境下构建,和chunkname相同;如果是生产环境下构建,则使用一个从0开始的数字进行编号
webpack编译过程相关推荐
- vue中webpack编译打包使用之Vue知识点归纳(十一)
本文中将描述 webpack 简述 webpack 项目的初始化配置 webpack 打包运行一个 vue 项目 1 什么是webpack,到底需要解决什么问题 近几年前端的快速发展,前端已不是简单的 ...
- webpack 编译完成执行代码
接收一个项目,由于目录结构的问题,每次编译完成后就需要去修改编译后的 HTML 文件中引用的其它文件的路径. 所以想在编译完成后使用 node 来操作文件修改路径. 然后在 webpack 官网找到了 ...
- webpack编译提速:使用externals和DllPlugin
本文提供使用externals和DllPlugin优化webpack编译的大体思路,它们的基本思想是将依赖的框架等模块从构建过程中移除,进而提高打包速度以及减小打包产物的体积,具体的操作可以自行查阅. ...
- Compiler编译过程
Compiler编译过程 1.原理 编译器可以生成用来在与编译器本身所在的计算机和操作系统(平台)相同的环境下运行的目标代码,这种编译器又叫做"本地"编译器.另外,编译器也可以生成 ...
- C C++的编译过程详解
C/C++编译过程 C/C++编译过程主要分为4个过程 1) 编译预处理 2) 编译.优化阶段 3) 汇编过程 4) 链接程序 一.编译预处理 (1)宏定义指令,如#define Name Token ...
- OpenBLAS简介及在Windows7 VS2013上源码的编译过程
OpenBLAS(Open Basic Linear Algebra Subprograms)是开源的基本线性代数子程序库,是一个优化的高性能多核BLAS库,主要包括矩阵与矩阵.矩阵与向量.向量与向量 ...
- Dlib简介及在windows7 vs2013编译过程
Dlib是一个C++库,包含了许多机器学习算法.它是跨平台的,可以应用在Windows.Linux.Mac.embedded devices.mobile phones等.它的License是Boos ...
- Tesseract-OCR 3.04在Windows7 vs2013上编译过程
从https://github.com/tesseract-ocr/tesseract下载最新源码,commit id: 86acff5, 2016.06.07. 里面有个vs2010目录,用vs20 ...
- golang源码分析:编译过程词法解析的流程
golang编译 由于golang作为静态语言,当使用go build时就会生成对应的编译完成之后的文件,那这个编译过程大致会做什么事情呢,在golang中的编译大致有哪些流程. golang示例代码 ...
最新文章
- 【BZOJ-3712】Fiolki LCA + 倍增 (idea题)
- 深度学习中学习率(lr:learn rate)和batchsize如何影响模型性能?
- 【Python】Modin,只需一行代码加速你的Pandas
- 加快网站访问速度--jquery.js
- git撤销git commit
- 算法实现:返回单链表的倒数第pos个节点
- IDEA使用和实用小技巧
- aspx 请求不到后端_2021了你该知道的6个Node.js后端框架
- 我的世界服务器内无限刷物品,我的世界怎么无限刷物品
- c语言练习 落雷游戏
- ubuntu16.04 将火狐浏览器语言设置成中文
- 第二章 Java流程控制 ① 笔记
- 览器野史 UserAgent列传
- 环信网页端客服集成用户体系
- C++ 三维空间的点(继承)
- 解决中端投资痛点,“轻中端”能否抢占投资价值高地?
- 一小时内了解密码学:你需要知道的一切
- 微信Mac 3.0.0内测版上线!终于可以用电脑刷朋友圈了!!
- 使用 electron-builder 及 electron-updater 给项目配置自动更新
- 2007工程院院士增选候选名单
热门文章
- 手把手教你玩转ARP包(一)
- 如何让你的大文件上传变得又稳又快?
- python中的Xpath方法总结
- 使用drawio进行画图真的很方便(WEB版/Chrome APP版/桌面版)
- 后端Coder如何做好代码设计?
- Union-find
- ​冲刺最后一公里——音视频场景下的边缘计算实践
- ioctl , fcntl socket操作详解
- k8s部署nginx集群
- Tensorflow GPU安装指南 (Ubuntu 16.04 anaconda cuda8.0 cuDNN6.0)