Webpack 一些概念
目录
- 引子
- Dependency Graph
- Runtime
- Manifest
- Module、Bundle、Chunk
- Bundle Splitting
- Code Splitting
- Tree Shaking
- Output Filename
- 参考资料
引子
打包工具有多种,实际中 webpack 接触的比较多,目前中文文档跟英文文档有些对不上,其中有些概念比较分散,对此进行集中的整理。
Dependency Graph
任何时候,一个文件依赖于另一个文件,webpack 把这种情况视为依赖关系。这让 webpack 可以接受非代码资源,例如图片或字体,并且可以将它们作为依赖提供给你的应用程序。
当 webpack 处理你的程序时,可能是从命令行或配置文件中定义的一系列模块开始。从入口文件开始,webpack 递归地构建一个依赖图(Dependency Graph),这个依赖图包含着应用程序所需的每个模块,并生成一个或多个 bundle
,可由浏览器加载。
Runtime
runtime
和manifest
数据,基本上是在浏览器运行时,webpack 用来连接模块化应用程序所需的所有代码。- 它包含在模块交互时连接它们所需的加载和解析逻辑。这包括连接已经加载到浏览器中的模块,以及延迟加载尚未加载的模块的逻辑。
Manifest
manifest
作为名词时,中文意思是:(船或飞机的)货单,旅客名单- 当编译器进入、解析和映射你的应用程序时,它会在你的所有模块上保留详细的信息,这个数据集合称为“
manifest
”。 - 当完成打包并发送到浏览器时,
runtime
会通过manifest
来解析和加载模块。 - 无论你选择哪种模块语法,那些
import
或require
语句现在都已经转换为__webpack_require__
方法,此方法指向模块标识符(module identifier)。
Module、Bundle、Chunk
Module
- 比完整程序更小的接触面的分离的块(chunk)功能,使得验证、调试、测试轻而易举。
- 精心编写的模块提供了可靠的抽象和封装边界,构成了连贯的设计和清晰易懂的目的。
Bundle
- 作为名词时,意思是:(一)捆,包,扎。
- 从多个不同的模块产生,包含已经加载和编译过程的源文件的最终版本。
- 个人理解就是一些相关联的包打包成的一个文件。
Chunk
- 作为名词时,意思是:块,组块,话语组成部分。
- 这个 webpack 中特定术语在内部用于管理打包过程。
bundles
由chunks
组成,其中有多种类型(例如入口)。- 通常,
chunks
与输出bundles
直接对应,但是,有些配置不产生一对一关系。
Bundle Splitting
- 这个过程提供了一种优化构建的方法,允许 webpack 为单个应用生成多个
bundle
。 - 它可以将每个包的更改隔离开来,而不影响其它包。
- 这样利用浏览器的缓存,可以减少需要重新发布和客户端下载的代码量。
Code Splitting
指将代码分成不同的 bundles/chunks
,然后可以按需加载,而不是加载包含所有内容的单个 bundles
。
Tree Shaking
- 消除多余和未使用的代码。
- webpack 通过分析各种导入语句和导入代码的使用,以确定实际使用的依赖项,删除不属于“tree”的一部分。
Output Filename
webpack 提供了一种使用称为 substitution (可替换模板字符串) 的方式,通过带括号字符串来模板化文件名。
模版 | 描述 |
---|---|
[hash] | 模块标识符的 hash。修改一个模块,其它模块生成的 hash 都会变。 |
[contenthash] | 文件内容的 hash,每个都不相同。只有改变了内容的文件的 hash 才会变。 |
[chunkhash] | chunk 内容的 hash。一个文件改变,其关联的文件 hash 也会变。 |
[name] | 模块的名称 |
[id] | 模块标识符 |
[query] | 模块的 query,例如文件名 ? 后面的字符串 |
[function] | 返回文件名称的方法 |
参考资料
Webpack 一些概念的更多相关文章
- webpack(2)webpack核心概念
前言 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具.当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph) ...
- webpack核心概念
一.webpack四个核心概念 1.入口[Entry] webpack将创建所有应用程序 依赖关系图表.图表的起点被称之为 入口起点.入口起点告诉webpack从哪里开始,并遵循着依赖关系图表知道打包 ...
- webpack入门概念
一 概念 1 入口(entry) 入口起点(entry point)提示webpack 应该使用那个模块,来作为构建其内部依赖图得开始.进入入口七点后,webpack 会找出那些模块和库是入口起点(直 ...
- WebPack基本概念以及基本使用
入门Webpack,看这篇就够了 2017年9月18日更新,添加了一个使用webpack配置多页应用的demo,可以点击此处查看 2017年8月13日更新,本文依据webpack3.5.3将文章涉及代 ...
- webpack基础概念
中文文档:https://webpack.docschina.org/concepts/ 一个现代 JavaScript 应用程序的静态模块打包器(static module bundler). 在 ...
- webpack核心概念使用的综合小案例
注: 由于版本更新很快,同样的配置不同版本很可能会出错(这个就很绝望了) 解决思路 看文档 查看源码接口 网上搜索相应错误 环境 webpack4.x + yarn 文件结构 . ├── dist / ...
- webpack安装与核心概念
安装webpack webpack核心概念:入口.输出.加载器.插件.模块.模式 一.安装webpack 1.安装webpack之前需要安装nodejs环境,在使用nodejs环境自带的包管理工具np ...
- webpack四个基础概念
本文参考自:https://www.cnblogs.com/xiaohuochai/p/7002344.html webpack 核心概念:入口(entry).输出(output).加载器(loade ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
随机推荐
- JavaScript-----3.变量
1.变量的使用 变量在使用的时候分两步:1. 声明变量 2. 赋值 1.1声明变量 //声明变量 var age;//声明一个名字为age的变量 var是JS的一个关键字,用于声明变量,使用该关键字声 ...
- 部署kube-proxy组件
目录 前言 创建kube-proxy证书签名请求 创建和分发 kubeconfig 文件 创建kube-proxy配置文件 分发和创建kube-proxy配置文件 创建和分发 kube-proxy s ...
- 获取Zabbix 中资源的使用率
import pymysql as MySQLdb import time import datetime import xlsxwriter # zabbix数据库信息: zdbhost = 'xx ...
- CentOS 7 Cobbler 自动化安装系统
在上一篇Cobbler 安装中,配置好了Cobbler,下面来配置自动化安装 配置cobbler-DHCP # 修改settings中参数,由cobbler控制dhcp [root@cobbler ~ ...
- (Nginx+PHP+MySQL)单机+Redis部署
链接:Nginx+PHP+MySQL+Redis多机部署 1.lnmp+redis工作机制 2.lnmp+redis操作步骤(lnmp为单机部署) (1)lnmp+redis实战环境 lnmp服务器: ...
- 宝塔面板的数据库连接本地Navicat Premium
把宝塔面板的数据库连接本地Navicat Premium,这样就方便操作了.下面我教大家如何实现. 第一步:在阿里云的安全组添加安全规则,配置安全组放开3306端口 第二步:打开宝塔设置数据库的权限, ...
- SpringBoot整合freemarker模板
一.目录展示 二.导入依赖 三.application.properties配置文件 四.在src/main/resource/templates文件夹中创建HelloFreeMarker.ftl文件 ...
- 基于VMware Workstation下CentOS的搭建
网络安全学习内容 二.VMware安装CentOS系统 需要准备的文件: 从http://mirrors.huaweicloud.com/centos/7.7.1908/isos/x86_64/中下载 ...
- 一道时间复杂度为O(N)空间复杂度为O(1)的排序问题
题目:对1, 2, ... , n的一个无序数组,排序,要求时间复杂度为O(N),空间复杂度为O(1). 思路:该题利用数组元素和数组下标相差1的关系,Java代码如下: import java.ut ...
- OC 与js 互相调用
参考文章 iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 参考文章 http://www.jianshu.com/p/fd378c6d70c0 利用苹果原生的JavaScriptC ...