Webpack入门教程 ｜ 青训营笔记

SaraiNoQ
70 阅读5分钟

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

知识体系

知识图谱.png

知识体系.png

为什么要学习Webpack

  • 理解前端工程化的概念、工具、目标
  • 提高个人核心竞争力
  • 高阶前端必经之路

什么是Webpack

wbepack.png

本质上，webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

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

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

Webpack打包核心流程

示例

  1. npm i -D webpack webpack-cli
  2. 编辑配置文件
  3. 执行编译命令

Entry ⇒ Dependencies Lookup ⇒ Transform ⇒ Bundle ⇒ Output

  1. 入口处理：从entry文件开始，启动编译流程
  2. 依赖解析：从entry文件开始，根据require or import等语句找到依赖资源
  3. 资源解析：根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
  4. 递归调用2、3，直到所有资源处理完毕
  5. 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

模块化 + 一致化

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

关键配置项介绍

关于Webpack的使用方法，基本都围绕“配置”展开

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

流程类

流程类.png

配置总览.png

工具类：HMR

Hot Module Replacement — 模块热替换

HMR.png

1. webpack.config.js
// ...
devServer: {
	hot: true
},
watch: true

2. npx webpack serve

工具类：Tree-shaking

用于删除Dead Code

  • 代码没有被用到，不可到达
  • 代码的执行结果不会被用到
  • 代码只读不写
  • 。。。
mode: 'production',
optimization: {
	usedExports: true
}

其他工具

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

问题

  • 除了上面提到的内容，还有哪些配置可以划分为“流程类”配置？
  • 工具类配置具体有什么作用？

Loader组件

处理CSS

  1. 安装loader：npm add -D css-loader style-loader

  2. 添加module处理css文件

    css-loader.png

问题

  • Loader有什么作用？为什么这里需要用到css-loader、style-loader

    • 为了处理非标准JS资源，设计出资源翻译模块 —— Loader
    • 将资源文件翻译为标准JS

  • 与在HTML文件中维护css相比，这种方式有什么优劣？

  • 如何在webpack中引入css预编译框架？

接入Babel

  1. 安装依赖：npm i -D @babel/core @babel/preset-env babel-loader

  2. 配置module

    babel.png

问题

  • Babel 具体有什么功能？
  • Babel 与 Webpack 分别解决了什么问题？为何两者能一同工作？

链式调用

loader.png

链式调用.png

特性

webpack-loader.png

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

如何编写Loader

source：源码

sourceMap：上一段代码可能生成

data：额外信息

loader格式.png

常用Loader

常用loader.png

问题

  • Loader的输入输出是什么？
  • Loader的链式调用是什么意思？如何串联多个Loader？
  • Loader如何处理异步操作？

Plugin组件

生成HTML

  1. 安装依赖：npm i -D html-webpack-plugin

  2. 声明配置

    html.png

  3. 运行webpack自动生成html文件

问题

  • 相比于手动维护 HTML 内容，这种自动生成的方式有优缺点？

为什么要设计插件？

webpack编译流程

总流程.png

大型项目总流程复杂

  • 新人需要了解整个流程细节，上手成本高
  • 新功能迭代成本高，牵一发而动全身
  • 功能僵化，作为开源项目缺乏成长性
  • 心智成本高 ⇒ 可维护性低 ⇒ 生命力弱

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

理解插件

插件详解：

[源码解读] Webpack 插件架构深度讲解

钩子的核心信息

1.时机：编译过程的特定节点,，Webpack会以钩子形式通知插件此刻正在发生什么事情；

2.上下文：通过tapable提供的回调机制，以参数方式传递上下文信息；

3.交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

问题

  • Loader 与插件有什么不同点？
  • “钩子”有什么作用？如何监听钩子函数？

如何学习Webpack

入门：学习灵活应用

  • 理解打包流程
  • 熟练掌握常用配置项、Loader、插件的使用方法。能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
  • 掌握常见脚手架工具的用法

进阶：学会扩展Webpack

  • 理解Loader、Plugin机制，能够自行开发Webpack组件
  • 理解常见性能优化手段，并用于解决实际问题
  • 理解前端工程化概念与生态现状

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

  • 理解源码，为社区做贡献

关于Webpack的详细学习请参考：

Webpack详细学习资料

avatar
文章
阅读
粉丝