构建Webpack知识体系｜ 青训营笔记

用户8554144141688
87 阅读5分钟

构建Webpack知识体系 ｜ 青训营笔记

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

为什么要学习Webpack?

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

课程目标

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

1 什么是Webpack

前端项目由代码资源构成，在旧时代需要人们手动管理资源，对开发效率影响大。因此，出现了很多工程化工具（某种程度上正是这些工具的出现，才有了“前端工程”这一概念）。

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

image.png

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

2 Webpack打包核心流程

  • 示例

image.png

  • 核心流程（极度简化版）

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

image.png

1）入口处理

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

2）依赖解析

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

3）资源解析

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

4）资源合并打包

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

Webpack主要做的事情：模块化 + 一致性

01 多个文件资源合并成一个，减少http请求数 02 支持模块化开发 03 支持高级JS特性 04 支持Typescript、CoffeeScript方言 05 统一图片、CSS、字体 等其它资源的处理模型 06 Etc……

使用Webpack

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

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

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

image.png

使用Webpack - 流程类配置

image.png

使用Webpack - 配置总览

  • 关键配置项介绍

    按使用频率：

    • 'entry/output'
    • 'module/plugins'
    • 'mode'
    • 'watch/devServer/devtool'

使用Webpack - 处理CSS

image.png

使用Webpack - 接入Babel

Babel 本质上是一种JS代码转义的工具

image.png

使用Webpack - 工具线

image.png

使用Webpack - HMR

HMR: Hot Module Replacement 模块热替换。写的代码能够立刻被更新到浏览器上，并且浏览器是不需要整个页面的都刷新的，直接就能应用新的代码。

image.png

使用Webpack - Tree-Shaking

树摇：将定义了但是没有实际用到的代码删掉

Dead Code：

代码没有被用到，不可到达；

模块导出了，但未被其它模块使用；

代码的执行结果不会被用到；

代码只读不写……

Tree-Shaking：

模块导出了，但未被其它模块使用

开启tree-shaking：

'mode:"production"'
'optimization.usedExports:true'
(对工具类库如Lodash有奇效)

3 Loader组件

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

链式调用：

  • less-loader:实现less=>css的转换
  • css-loader:将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
  • style-loader:将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的stye标签

image.png

Loader其他特性:

image.png

Loader 特点：

  • 链式执行
  • 支持异步执行
  • 分normal、pitch两种模式

常见Loader:

image.png

插件是什么？为什么这么设计？

这是一个特别复杂的过程，那么：

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

心智成本高=>可维护性低=>生命力弱

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

理解插件

首先：插件围绕钩子展开

image.png

钩子的核心信息：

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

时机：'compier.hooks.compilation'

参数：'compilation'等

交互：'dependencyFactories.set'

image.png

4 如何学习Webpack

  • 入门级：学会灵活应用

    • 理解打包流程

    • 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境

    • 掌握常见脚手架工具的用法，例如：Vue-cli、create-react-app、@angular/cli

  • 进阶：学会扩展Webpack

    • 理解Loader、Plugin机制，能够自行开发Webpack组件

    • 理解常见性能优化手段，并能用于解决实际问题

    • 理解前端工程化概念与生态现状

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

    • 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建

5 知识点

image.png

个人总结与体会

通过本节课程的讲解，我学习到了什么是Webpack、Webpack的核心打包流程、Webpack的基本用法、如何使用Webpack、Webpack的核心常用组件、Loader组件、对插件也有了新的理解和认识、还知道了要如何学习Webpack，我学到了很多，收获非常大！

avatar
文章
阅读
粉丝