跳到主要内容

认识

2023年03月05日
柏拉文
越努力，越幸运

一、认识​

Webpack 是一种用于构建 JavaScript 应用程序的静态模块打包器，它能够以一种相对一致且开放的处理方式，加载应用中的所有资源文件（图片、CSS、视频、字体文件等），并将其合并打包成浏览器兼容的 Web 资源文件。

Webpack 则忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作 Module —— 模块对象，以相同的加载、解析、依赖管理、优化、合并流程实现打包，并借助 Loader、Plugin 两种开放接口将资源差异处理逻辑转交由社区实现，实现统一资源构建模型，这种设计有很多优点:

  1. 所有资源都是 Module: 所以可以用同一套代码实现诸多特性，包括：代码压缩、Hot Module Replacement、缓存等

  2. 打包时，资源与资源之间非常容易实现信息互换，例如可以轻易在 HTML 插入 Base64 格式的图片

  3. 借助 Loader，Webpack 几乎可以用任意方式处理任意类型的资源，例如可以用 Less、Stylus、Sass 等预编译 CSS 代码

现如今的 Webpack 已经非常非常成熟，在基础构建能力之外还提供了诸多锦上添花的工程化工具，包括:

  1. 基于 Module Federation 的微前端方案

  2. 基于 webpack-dev-server 的 Hot Module Replacement

  3. 基于 Terser、Tree-shaking、SplitChunks 等工具的 JavaScript 代码压缩、优化、混淆方案

  4. 基于 lazyCompilation 的延迟编译功能

  5. 有利于提升应用性能的异步模块加载能力

  6. 有利于提升构建性能的持久化缓存能力

  7. 内置 JavaScript、JSON、二进制资源解析、生成能力

二、特点​

三、问题​

3.1 Vite、Rollup、Webpack 各自优势、特点?​

3.2 Vite、Rollup、Webpack 各自的 bundle.js 特点?​

扩展知识​

bundle、chunk、**vendor**这些构建领域的专业概念，这里给大家提前解释一下:

  • bundle 指的是整体的打包产物，包含 JS 和各种静态资源。

  • chunk 指的是打包后的 JS 文件，是 bundle 的子集。

  • vendor 是指第三方包的打包产物，是一种特殊的 chunk。