f

flyingFish

V1

2022/08/10阅读:23主题:科技蓝

webpack知识体系 | 青训营笔记

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

为什们要学习Webpack

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

一、什么是Webpack

前端项目于由神门构成?---资源

一个前端项目包括多种资源:PNG、JS、TS、css、Less、Vue...

在早期我们需要手动去管理这些资源,但开发效率相对现在相差较大,具体体现在:

  • 依赖手工,比如优50多个JS文件进行操作,过程繁琐
  • 当代码文件之间有依赖的时候,就得严格按照以来顺序书写
  • 比较难接入Less、Sass等工具
  • JS、图片、CSS资源管经理模型不一致等等

基于这些问题,就诞生出里各种各样的工程化工具,某种程度上说,正式这些工具的出现,才有了”前端工程“这一概念

一些前端工程化工具

  • webpack
  • VIte
  • Gulp
  • rollup.js
  • browserify等

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

二、使用Webpack---示例

  1. 安装

    npm i -D webpack webpack-cli
  2. 编辑配置文件

  3. 执行编译命令

    npx webpack

核心流程(极度简化版)

  1. 入口处理

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

  1. 依赖解析

    从enrtry文件开始,更具require或者import等语句找到依赖资源

  2. 资源解析

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

  3. 资源合并打包

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

  4. 递归调用2、3,直到所有资源处理完毕

工作(模块化+一致性)

  1. 多个文件资源合并成为一个,减少http请求书
  2. 支持模块化开发
  3. 支持高级JS特性
  4. 支持TS、CoffeScript方言
  5. 同意图片、css、字体等其他资源的处理模型
  6. Etc...

核心:配置(流程类和工具类)

  • 流程类:作用于流程中莫格或若干个环节,直接影响打包效果的配置项
  1. 输入:
    • entry
    • context
  2. 模块解析
    • resolve
    • externals
  3. 模块转译
    • module
  4. 后处理
    • optimization
    • mode
    • target

参考资料

装用配置项:

  • entry/putput

  • module/plugins

  • mode

  • watch/devServer/devtol

  • 工具类:主流程之外,提供更多工程化能力的配置项

热更新:HMR

  1. 开启:

  2. 启动

    npx webpack serve
  3. 参考Webpack 原理系列十:HMR 原理全解析

Tree-Shaking

功能:对为用到、不可到达、执行结果不会被用到、代码只读不写等类似无用的操作进行处理

开启:

mode: "production"
optimization.usedExports:true

PS :对工具类库如Lodash有奇效

其他工具

  • 缓存
  • Souremap
  • 性能监控
  • 日志
  • 代码压缩
  • 分包
  • ···

三、进阶篇:理解Loader

Lodaer:为了处理非标准JS资源,设计初资源翻译模块,用于将资源翻译为标准JS

特点:

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

参考:Webpack 原理系列七:如何编写loader

四、进阶篇:理解插件

webpack编译流程 编译流程

理解插件

钩子的核心信息

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

参考

五、相关资料

分类:

前端

标签:

前端

作者介绍

f
flyingFish
V1