Webpack 知识体系 | 青训营笔记

这是我参加「第五届青训营」伴学笔记创作活动的第 12 天

Webpack定义解析

前端项目由资源构成

Webpack 本质上是一种前端资源编译、打包工具

• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片 等资源文件
• 支持 HMR + 开发服务器
• 支持持续坚挺、持续构建
• 支持代码分离
• 支持 Tree-shaking
• 支持 Sourcemap

Webpack的使用

• 安装

npm i -D webpack webpack-cli

• 编辑配置文件
• 执行编译命令

npx webpack

核心流程 —— 极度简化版

• 入口处理
  • 从entry文件开始，启动编译流程
• 依赖解析
  • 从entry文件开始，根据require or import等语句找到依赖资源
• 资源解析
  • 根据module配置，调用资源转移器，将png、css等非标准JS资源转译为 JS 内容
• 资源合并打包
  • 将转移后的资源内容合并打包为可直接在浏览器运行的JS 文件

模块化 + 一致性

• 多个文件资源合并成一个，减少 http 请求数
• 支持模块化开发
• 支持高级 JS 特性
• 支持 Typescript、CoffeeScript 方言
• 同意图片、CSS、字体 等其他资源的处理模型

使用Webpack

关于Webpack 的使用方法，基本都围绕 “配置”展开，而这些配置大致可划分为两类：

• 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项

  • 输入
  • 模块解析
  • 模块转译
  • 后处理

• 工具类：主流程之外，提供更多工程化能力的配置项

• 生成HTML

• 工具线

• HMR

• Tree-Shaking

总结

今天比较忙，笔记做的很粗糙，还有一部分没有做完，先这样啦又是混的一天