Webpack 知识体系 | 青训营笔记

用户9608586346079
26 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

一、为什么要学习Webpack?

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

1.什么是Webpack

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

二、使用Webpack

  1. 安装
  2. 编辑配置文件
  3. 执行编译命令

1.核心流程

  1. 入口处理

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

  1. 依赖解析

    • 从entry文件开始，根据requireorimport等语句找到依赖资源

  1. 资源解析

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

  1. 资源合并

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

2.模块化 + 一致性

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

3.使用Webpack

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

  1. 流程类：作用于流程中某个O若干个环节，直接影响打包效果的配置项
  2. 工具类：主流程之外，提供更多工程化能力的配置项

4.配置总览

image-20230209103031072.png

5.处理CSS

  1. 安装Loader
  1. 添加module处理css文件

6.接入Babel

  1. 安装依赖
  1. 声明产物出口output
  1. 执行npx webpack

7.其他工具

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

三、理解Loader

1.链式调用

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

2.其他特性

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

image-20230209103752828.png

四、理解插件

1.钩子的核心信息

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

2.学习方法

  • 理解打包流程
  • 熟练掌握常用配置项、Loader.、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
  • 掌握常见脚手架工具的用法，例如：Vue-cli、create-react-app @angular/cli
  • 理解Loader、Plugin机制，能够自行开发Nebpack组件
  • 理解常见性能优化手段，并能用于解决实际问题
  • 理解前端工程化概念与生态现状
  • 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建
avatar
文章
阅读
粉丝