Webpack 知识体系 | 青训营笔记

记得带伞_
48 阅读4分钟

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

R-C.jfif

课程笔记

Webpack简介

问题的出现

我们的前端项目都是由各种源代码和资源构成的（JS、TS、PNG等等），我们可以手动管理这些资源，但资源很多很复杂的时候就会出现以下这些问题：

  • 依赖手工，比如有 50 个js文件的各种操作，过程繁琐
  • 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
  • 开发与生产环境一致，难以接入 TS 或 JS 新特性
  • 比较难接入Less、Sass 等工具
  • Js、图片、css 资源管理模型不一致

这些都是旧时代非常突出的问题，对开发效率影响非常大。

问题的解决

为了解决上述的问题，出现了很多的工程化工具（某种程度上正是这些工具的出现，才有了“前端工程”这一概念），Webpack就是其中一个。

image.png

Webpack本质上是一种前端资源编译、打包工具，他有如下这些特性：

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

image.png

正是Webpack的出现让我们在开发前端项目时对于资源的管理效率得到了很大的提升。

使用Webpack

安装Webpack

  • 安装

    可以在终端中使用npm进行webpack的安装。

image.png

  • 编辑配置文件

    安装后我们可以在目录中打开webpack.config.js进行webpack配置。

image.png

  • 执行编译命令

    编译命令为npx webpack。

image.png

核心流程

Webpack打包的核心流程原理上是很复杂内容很多的，但大致的最核心的是以下四个步骤：

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

递归调用2、3步骤，直到所有资源处理完毕。

模块化 + 一致性

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

Webpack关键配置项

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

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

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

配置总览

image.png

按照使用频率，主要有以下几大配置项：

  • entry/output

    程序的输入输出，是必须配置的。

  • module/plugins

  • mode

  • watch/devServer/devtool

使用Webpack处理CSS

  • 安装Loader

image.png

  • 添加module处理CSS文件

image.png

处理结果如下：

image.png

使用Webpack接入Babel

  • 安装依赖

image.png

  • 声明入口 entry& 产物出口output
  • 添加module处理CSS文件

image.png

  • 执行 npx webpack

接入Babel后运行结果：

image.png

使用Webpack生成HTML

  • 安装依赖

image.png

  • 进行配置

image.png

  • 执行npx webpack

HMR

image.png

Hot Module Replacement——模块热替换，写的代码会被立刻更新到浏览器上。

image.png

  • 开启HMR
module.exports={
	// ...
	devServer: {
        hot:true; // 必需
    }
};
  • 启动Webpack
npx webpack serve

原理可参考：《Webpack 原理系列十：HMR 原理全解析》

Tree-Shaking

Tree-Shaking（树摇）用于删除Dead Code。

Dead Code

  • 代码没有被用到，不可到达
  • 代码的执行结果不会被用到
  • 代码只读不写

Tree-Shaking

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

Tree-Shaking 开启步骤：

  • mode: “production”
  • optimization.usedExports: true

image.png

其他工具

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

总结

通过本次课程，大致对Webpack技术有了一定的了解，从Webpack安装到配置，学习到了很多的Webpack知识，在今后的项目开发中我们要经常使用Webpack来对项目资源进行打包，所以认真的学习Webpack是很有必要的。

avatar
文章
阅读
粉丝