为什么要学习Webpack

• 理解前端“工程化”概念、工具、目标

• 一个团队总要有那么几个人熟悉 Webpack，某种程度上可以成为个人的核心竞争力

• 高阶前端必经之路

 

主要内容

• 什么是 Webpack

• Webpack 打包核心流程

  • 示例

  • Entry => Dependencies Lookup => Transform => Bundle => Output

  • 关键配置项介绍

• Loader组件

• Plugin组件

• 如何学习Webpack

  • 入门级:学会灵活应用

  • 进阶:学会扩展Webpack

  • 大师:源码级理解 Webpack 打包编译原理

 

01 什么是Webpack

 

前端项目由什么构成？ ——资源

一个前端项目一般由很多种资源构成，开发的时候会涉及到如图片文件、JS文件、CSS文件、react文件、字体文件等等。当然，我们可以手动管理这些资源，比如在HTML中使用标签引入CSS样式文件等等。但是这样会出现问题：

1. 依赖手工，比如有50个JS文件...操作，过程繁琐，需要手动写很多东西
2. 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
3. 开发与生产环境—致，难以接入TS 或JS新特性
4. 比较难接入 Less、Sass等工具
5. JS、图片、CSS资源管理模型不一致

这些都是旧时代非常突出的问题，旧时代有很多手动的过程，手动需要耗费大量成本和时间，特别麻烦，对开发效率影响非常大。因此出现了很多工程化的工具，某种程度上正是这些工具的出现，才有了“前端工程"这一概念。

回到Webpack，什么是Webpack？本质上是一种前端资源编译、打包工具。

• 多份资源文件打包成一个 Bundle

• 支持 Babel、Eslint、TS、CoffeScript、Less、Sass

• 支持模块化处理css、图片等资源文件

• 支持HMR＋开发服务器

• 支持持续监听、持续构建

• 支持代码分离

• 支持Tree-shaking

• 支持Sourcemap

 

02 使用Webpack

使用实例：

1、安装

2、编辑配置文件

3、执行编译命令

 

核心流程（简化）

1.入口处理

从entry文件开始，启动编译流程

2依赖解析

从entry文件开始，根据require or import等语句找到依赖资源

3.资源解析

根据module配置，调用资源转移器，将png css等非标准JS资源转译为JS内容

4.资源合并打包

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件