词汇表

鉴于 Webpack 带有特定的术语,下面将根据本书目录结构收集一些主要术语,并对其作出解释。

介绍

  • 静态分析 - 当工具执行静态分析时,它会检查代码而不运行它,这就是 ESLint 或 Webpack 等工具的运行方式。可静态分析标准,如 ES2015 模块定义,可实现 Tree Shaking 等功能。
  • 解析是 Webpack 遇到模块或 loader 时发生的过程。当解析发生时,它会尝试根据给定的解析规则处理模块或 loader。

开发

  • Entry 是指 Webpack 使用的文件作为打包的起点。应用程序可以有多个入口,根据配置,每个入口可以生成多个包。入口在 Webpack 的 entry 配置中定义。入口是依赖图开头的模块
  • 模块是描述应用程序某个局部的通用术语。在 Webpack 中,它包括 JavaScript、样式表、图像或其他东西。Loaders 允许 Webpack 支持不同的文件类型,因此支持不同类型的模块。如果从源代码的多个位置指向同一个模块,Webpack 将在输出中生成单个模块,从而在模块级别启用单例模式。
  • 插件与 Webpack 的事件系统相关联,并可以向其中注入功能。他们可以对 Webpack 进行扩展,并可与 loader 组合以实现最大程度的控制。虽然 loader 在单个文件上工作,但插件具有更广泛的访问权限,并且能够进行更全面的控制。
  • **热模块替换(HMR)**是指一种技术,可以在运行中修补浏览器中正在运行的代码,而无需刷新整页。当应用程序包含复杂状态时,如果没有 HMR 或类似的解决方案,则恢复它可能很困难。
  • Linting是指按照用户预定义的规则对代码进行静态分析的过程。这个过程可以发现语法错误,还会强制执行代码格式化等等。虽然 linting 功能存在一定的局限,但 linter 对于发现早期错误和统一代码规范非常有用。

加载

  • Loader执行某种转换,它接受源并返回转换源。它也可以跳过处理并对输入执行检查。通过配置,loader 通常基于模块类型或位置来定位模块。loader 一次只能作用于一个模块,而插件可以作用于多个文件。
  • 资源是项目的媒体和源文件的通用术语,它是 Webpack 在构建打包时使用的原材料。

构建

  • 源映射描述源代码和生成的代码之间的映射,使浏览器提供更好的调试体验。例如,通过 Babel 运行 ES2015 代码会生成新的 ES5 代码。如果没有源映射,开发人员无法将打包代码中发生的事情对应到源代码中。样式表在通过预处理器或后置处理器运行后也会遇到这种情况。
  • Bundle打包的结果。捆绑包括将应用程序的源材料处理成可以使用的最终捆绑包。捆绑器可以生成多个捆绑包。
  • 分割打包提供了一种优化构建的方法,允许 Webpack 为单个应用程序生成多个打包。因此,每个打包都可以与影响其他打包的更改隔离开来,从而减少需要重新发布的代码量,从而减少客户端重新下载并利用浏览器缓存的优势。
  • 代码拆分比捆绑拆分产生更多粒度的包。要使用它,开发人员必须通过源代码中的特定调用启用它。使用动态import()是一种方式。
  • Chunk 是一个特定于 Webpack 的术语,在内部用于管理打包过程。Webpack 的 Bundle 由 Chunk 组成,并且有好几种类型的 Chunk。

优化

  • 压缩是一种优化技术,其中代码以更紧凑的形式编写但不改变原本的含义。如果不注意的话,特定的破坏性转换会破坏代码。
  • Tree Shaking 是基于静态分析丢弃未使用代码的过程。ES2015 模块定义支持这个特性,因此可以以这种特定方式对代码进行分析。
  • 哈希是指生成附加到资源/打包路径的哈希值,以在客户端上使旧资源/打包路径缓存失效的过程。哈希包名称的示例:app.f6f78b2fd2c38e8200d.js

输出

  • 输出是指 Webpack 发出的文件。更具体地说,Webpack 根据输出配置发出资源
  • 目标选项允许您覆盖默认 Web 目标。您可以使用 Webpack 为特定的 JavaScript 平台开发代码。
用户头像
登录后发表评论