Webpack知识体系|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第 15 天。

为什么要学习Webpack

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
• 高端前端必经之路

主要内容

• 什么是Webpack
• Webpack打包核心流程
  • 示例
  • Entry => Dependencies Lookup =>Transform =>Bundle =>Output
  • 关键配置项介绍
• Loader组件
• Plugin组件
• 如何学习Webpack
  • 入门级：学会灵活应用
  • 进阶：学会扩展Webpack
  • 大师：源码级理解Webpack打包编译原理

课程目标

• 理解Webpack的基本用法
• 通过介绍Webpack功能、Loader与Plugin组件设计，建立一个知识体系
• 不会事无巨细，介绍Webpack所有
• 也不是深入源码，讲解底层实现原理

什么是Webpack

• 前端项目由资源构成
• 问题
  • 依赖手工，过程繁琐
  • 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
  • 开发与生产环境一致，难以接入TS或JS新特性
  • 比较难接入Less、Sass等工具
  • JS、图片、CSS资源管理模型不一致

这些都是旧时代非常突出的问题，对开发效率影响非常大，直到出现了很多工程化工具。某种程度上正是这些工具的出现，才有了“前端工程”这一概念。

• Webpack
• 本质上是一种前端资源编译、打包工具
  • 多分资源文件打包成一个Bundle
  • 支持Bable、Eslint、TS、CoffeeScrip、Less、Sass
  • 支持模块化处理CSS、图片等资源文件
  • 支持HMR+开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持Tree-shaking
  • 支持Sourcemap
  • ……

使用Webpack

• 安装

  npm i -D Webpack Webpack-cli
  

• 编辑配置文件

• 执行编译命令

  npx Webpack
  

核心流程

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

递归调用2、3，直到所有资源处理完毕。

模块化+一致性

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

配置

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

• 流程类：作用于流程中某个or 若干个环节，直接影响打包效果的配置项。
  • 输入：entry、context
  • 模块解析：resolve、externals
  • 模块转译：module
  • 后处理：optimization、mode、target
• 工具类：主流程之外，提供更多工程化能力的配置项。

按使用频率：entry/output、module/plugins、mode、watch/devServer/devtool

Webpack配置官方文档