词汇表
Webpack带有特定术语。下面按照模块分类介绍相关术语。
指南
- 静态分析 - 当工具执行静态分析时,它会检查代码而不运行它,如:ESLint或webpack运行。静态可分析标准,如:ES2015模块定义,可实现类似功能
**tree shaking**
。 - Resolving 是webpack遇到模块或loader时发生的处理过程。当发生这种情况时,它会尝试根据给定的解析规则解析它。
开发
- 入口(Entry) 引用一个被webpack使用的文件作为构建的起点。项目可以有多个
entry
,根据配置,每个entry
可以生成多个包。起点是被配置在webpack的entry
选项。 起点是关系依赖图的第一个modules。 - 模块(Module) 是描述项目的一个片段的通用术语。在webpack中,它可以引用JavaScript,样式表,图片或其他内容。Loaders 允许webpack支持不同的文件类型,因此支持不同类型的模块。 Webpack希望在输出中生成单个模块,从而启用模块级别单例模式。
- 插件(Plugins) 连接到webpack的事件系统,并可以在webpack中注入它。它们允许webpack扩展,并可与loader组合以实现最大程度的控制。loader可以在单个文件上运行,插件具有更广泛的访问权限,并且能够进行全方位的控制。
- 热交换(Hot Module Replacement (HMR)) 指的是在浏览器中运行的代码,在不需要整个页面刷新的情况下就能被即时修复。当应用程序包含复杂状态时,如果没有HMR或类似的解决方案,恢复该状态可能很困难。
- 语法检查(Linting) 是对一系列用户定义问题进行静态分析的过程。这些问题从发现语法错误到执行代码样式不等。虽然linting的功能是有限的,但是linter在帮助早期发现错误和加强代码一致性方面是很有意义的。
加载静态资源
- Loader 处理接受的源文件,然后返回源文件的转换结果。它还可以跳过处理过程,转而对输入执行检查。通过配置,loader通常基于模块类型或位置,以模块的子集为目标。loader一次只作用于一个模块(文件),而插件可以作用于多个模块(文件)。
- 静态资源(Asset) 是项目的媒体资源和源文件的总称,这些文件是webpack在构建包时使用的原材料。
构建
- 代码映射(Source maps) 提供源代码和生成的代码之间的映射,允许浏览器提供更好的调试体验。例如,通过Babel运行ES2015代码会生成全新的ES5代码。如果没有源映射,开发人员将不知道构建生成的代码中发生的事情和源代码中发生的事件之间的联系。样式经过loader处理前后也是如此。
- 构建结果(Bundle) 构建包含将应用程序的源材料处理成可以使用的最终构建包。构建工具可以生成多个构建包。
- 构建拆分(Bundle splitting) 提供一种优化构建的方法,允许webpack为单个应用程序生成多个
bundle
。因此,每个构建包都可以重新打包,从而由客户端重新下载并利用浏览器缓存。 - 代码分割(Code splitting) 它比
Bundle splitting
生成更多的构建包。要使用它,开发人员必须通过在源代码中使用的特定调用来完成它。动态的import()
是一个方案。 - 块(Chunk) 是一个特定于Webpack的术语,内部用于管理构建的过程。Webpack从块中组合出构建包,并且有几种类型。
优化
- 最小化(Minifying) 是一种优化技术,其中的代码以更紧凑的形式编写而不失其意义。如果你不小心,那么特定的转换将破坏你的代码。
- Tree shaking 是一个基于静态分析来删除未使用代码的过程。ES2015模块定义允许此过程,因为它可以以这种特定方式进行分析。
- 哈希(Hashing) 指的是生成hash的过程。带hash的包的名称如:
app.f6f78b2fd2c38e8200d.js
。
输出
- 输出(Output) 指webpack构建生成的文件。webpack依据
output
配置输出 bundles 和 assets 。 - 目标(Target) 这个webpack选项允许你覆盖默认的Web目标。你可以使用webpack为特定的JavaScript平台开发代码。
← 问题