Webpack | 青训营笔记

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

学习了解Webpack之前，可以先想一下为什么要学习Webpack，简单的一点就是，Webpack仍是现在流行的构建工具，很多项目就会用到。学习Webpack也可以帮助我们理解前端“工程化”概念、工具、目标，是高阶前端的必经之路。

什么是Webpack

前端项目由资源构成，我们可以手动管理这些资源，但是这样对开发要求、开发质量、开发效率影响很大，因此出现了很多工程化工具，帮助我们管理这些资源，Webpack就是代表之一。

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

将多份资源打包成一个bundle，支持 Babel、TS、Sass，支持模块化处理资源，支持 HMR + 开发服务器， 支持 Tree Shaking 等等。

使用 Webpack

1. 安装

    npm i webpack webpack-cli -D 

2. 编辑配置文件 webpack.config.js
3. 执行编译命令 npx webpack ...

Webpack 的使用方法基本上都围绕“配置”展开，配置大致可以分为两类：

流程类: 作用于流程中的某个或者若干个环节，直接影响打包效果的配置选项

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

Webpack打包核心流程

1. 入口处理

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

2. 依赖解析

   根据'import'/ 'require'等语句找到依赖资源

3. 资源解析

   根据 'module' 配置，调用资源转译器，解析资源

4. 资源合并打包

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

Loader

为了处理非标准 JS 资源，设计出资源翻译模块 —— Loader，用于将资源翻译为标准 JS。

特点：

1. 链式调用
2. 支持异步执行
3. 分 normal 、pitch 两种模式。

常见Loader：

Plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

插件架构： 对扩展开放，对修改封闭

插件围绕 ‘钩子’展开。

钩子：

1. 时机
2. 上下文
3. 交互