这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
为什么要学习Webpack？
- 理解前端“工程化”概念、工具、目标
- 熟悉Webpack成为个人核心竞争力
- 高阶前端必经之路
课程内容
主要内容:
- 什么是Webpack
- Webpack打包核心流程
- 示例
- Entry => Dependencies L ookup => Transform => Bundle => Output
- 关键配置项介绍
- L oader 组件
- Plugin组件
- 如何学习Webpack
- 入门级:学会灵活应用
- 进阶:学会扩展Webpack
- 大师:源码级理解Webpack打包编译原理
什么是Webpack
旧时代突出问题
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
随后出现了很多工程化工具，某种程度上正是这些工具的出现，才有了“前端工程”这一概念
Webpack 本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、 TS、CoffeScript、 Less、Sass
- 支持模块化处理Css、图片等资源文件
- 支持HMR +开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
使用Webpack
- 安装 npm i -D webpack wabpack-cli
- 编辑配置文件 webpack.config.js
- 执行编译命令 npx webpack
核心流程——极度简化版
1. 入口处理
从entry文件开始，启动编译流程
2. 依赖解析
从entry文件开始，根据requireorimport等语句找到依赖资源
3. 资源解析
根据module配置，调用资源转移器，将png、css等非标准JS资源转译成JS内容
4. 资源合并打包
根据module配置，调用资源转移器，将png、css等非标准JS资源转译成JS内容
递归调用2、3，直到所有资源处理完毕
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、 CoffeeScript 方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc...
Webpack使用方法
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
使用Webpack——流程类配置
使用Webpack——配置总览 按使用频率:
entry/ outputimodule/ pluginsmodewatch/ devServer/devtool
Entry 描述
-
dependOn：当前入口文件依赖的入口文件，即必须在入口文件被加载之前加载依赖的入口文件 -
filename：指定当前入口文件构建后输出的文件名称 -
import：启动构建时被夹加载的模块 -
library：配置入口文件的选项 -
runtime：运行时chunk的名称，如果设置了此选项将会创建一个同名的运行时chunk，否则将会使用入口文件作为运行时
文件结构
- 声明入口
entry - 声明产物出口
output - 运行
npx webpack
处理CSS
- 安装Loader
- 添加
module处理css文件
接入Babel
- 安装依赖
- 声明产物出口
output - 执行
npx webpack
生成HTML
- 安装依赖
- 声明产物出口
output
- 执行
npx webpack
HMR
- 开启HMR
- 启动Webpack npx webpack serve
Tree-Shaking
树摇，用于删除Dead Code
Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
Tree-Shaking
- 模块导出了，但未被其他模块使用
开启tree-shaking：
mode: "production"optimization.usedExports:true
对工具类库如Lodash有奇效
