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

为什么要学习 Webapck

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

什么是 Webapck

在开发前端项目的时候，我们需要管理项目中用到的很多文件。但是手动管理文件过程繁琐，当代码文件之间有依赖的时候，就必须严格按照顺序书写。开发与生产环境一致，难以接入 TypeScript 或者 JavaScript 的新特性。且难以接入 less sass 等预编译工具。

为了解决这些手动管理大量文件依赖的问题，出现了前端工程化的工具，Webpack 就是其中之一。

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

Webpack 的功能

• 多份资源文件打包成一个 bundle。
• 支持 babel、eslint、typescript、coffescript、less、sass 等。
• 支持模块化处理资源文件。
• HMR 和开发服务器。
• 持续监听、持续构建
• 代码分离
• 支持 tree-shaking 和 sourcemap

Webpack 打包流程

1. 入口处理

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

2. 依赖解析

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

3. 资源解析

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

4. 资源合并并打包

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

在打包资源的过程中找到新的资源会递归进行 2、3 步骤。

认识 Loader

由于 Webpack 只认识 JavaScript，如果要处理一些非标准的 JavaScript 资源，就需要用到资源翻译模块——Loader，Loader 会将资源翻译为标准 JavaScript。

认识插件

为什么要设计复杂的插件架构？

• 新人需要了解整个流程细节，上手成本搞
• 功能迭代成本高，牵一发动全身
• 功能僵化，作为开源项目而言缺乏成长性

插件架构的精髓：对扩展开放，对修改封闭。

Webpack 自身的很多功能就是通过插件来实现的。

插件用起来很简单，但是写起来会很复杂。

插件的编写要通过钩子来实现：

• 时机：编译过程的特定节点，Webpack 会以钩子的形式通知插件此刻正在发生的事情。
• 上下文：通过 tapable 提供的回调机制，以参数方式传递上下文信息。
• 交互：在上下文参数对象中附带了很多存在 side effect 的胶囊是接口，插件可以通过这些接口改变。