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教程满天飞,但是却很难找到一个能让新人快 ...
随机推荐
- 设计模式之观察者模式--PHP
列举一个场景:下班之后回家,打开家门,开始做饭,之后睡觉 以上场景如果按照传统的开始方式就是封装一个用户类,里面有回家方法,打开门方法,做饭方法,睡觉方法,之后在外面依次调用. 假设你代码开发完了,这 ...
- 【Android - 进阶】之RemoteViews简介
RemoteViews,顾名思义,就是远程的View,也就是可以运行在其他进程中的View.RemoteViews常用在通知和桌面小组件中. 一.RemoteViews应用到通知 首先来介绍一下系统自 ...
- centos7安装samba
samba是一个实现smb协议的开源软件,为局域网内的不同计算机之间提供文件和打印机共享服务. 1.安装yum groupinstall “file-server” -y 2.配置cp /etc/sa ...
- js中跳转的方法
javascript中的location.href有很多种用法,主要如下. self.location.href="/url" 当前页面打开URL页面location.href=& ...
- RocketMQ 主题扩分片后遇到的坑
目录 1.案情回顾 1.1 集群现状 1.2.RocketMQ 在线扩容队列 1.3 消息发送 2.问题暴露 3.问题分析 4.问题复盘 消息组接到某项目组反馈,topic 在扩容后出现部分队列无法被 ...
- iOS开发-Apple Pay-苹果支付
转自:http://www.open-open.com/lib/view/open1471952847228.html Apple Pay,是苹果公司在2014年苹果秋季新品发布会上发布的一种基于NF ...
- 利用etcd实现服务注册和服务发现
文章目录 服务注册 服务发现 协议编写 服务端实现 客户端实现 实验结果 参考文章 服务注册 主要逻辑在go func函数里面,先是去etcd获取一下服务,没有获取到的话就注册进去. package ...
- POJ 3281 Dining(网络流-拆点)
Cows are such finicky eaters. Each cow has a preference for certain foods and drinks, and she will c ...
- hdu-4638
There are n men ,every man has an ID(1..n).their ID is unique. Whose ID is i and i-1 are friends, Wh ...
- 洛谷 题解 P1615 【西游记公司】
我的程序只有1行... return scanf("%d:%d:%d\n%d:%d:%d\n%d", &a, &b, &c, &x, &y, ...