这是我参与「第四届青训营 」笔记创作活动的第17天。 这节课主要介绍了Webpack底层的原理和入门方法。
什么是Webpack
前端项目由「资源」构成
PNG, JPG, GIF, WEBP, JS, TS, CSS, Less, Vue, JSX, Sass…
依赖手动管理的写法
- 但依赖手工，比如有50个JS文件。…操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具 DJS、图片、CSS资源管理模型不一致
以上总结了旧时代非常突出的问题，对开发效率影响非常大。
于是出现了很多工程化工具：Gulp rollup.js Vite
Webpack本质是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
Webpack打包核心流程
Entry⇒Dependencies Lookup⇒Transform⇒Bundle⇒Output
示例
-
入口处理：entry，开始编译
-
依赖解析：require, import
-
资源解析：根据module配置，将非js资源转译为js内容 [递归]
- 依赖的文件中有依赖，继续依赖解析，一直到所有资源都被解析
-
资源合并打包
模块化 + 一致性
怎么写「配置」
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项中
- 工具类：主流程之外，提供更多工程化能力的配置项。
流程类强相关
entry 项目入口
context webpack找资源的文件夹
resolve
externals
module
optimization
mode
target
配置强相关
开发效率、性能优化、日志
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
关键配置项介绍
用module属性定义CSS loader
- test是过滤条件，处理css后缀的文件（右下）
- main.js中插入很多运行时代码
那么为什么需要做这种转换呢？本质上是因为 Webpack 只认识符合 JavaScript 规范的文本(Webpack 5之后增加了其它 parser)：在构建(make)阶段，解析模块内容时会调用 acorn 将文本转换为 AST 对象，进而分析代码结构，分析模块依赖；这一套逻辑对图片、json、Vue SFC等场景就不 work 了，就需要 Loader 介入将资源转化成 Webpack 可以理解的内容形态。
Loader有什么作用？为什么这里需要用到css-loader、style-loader 与旧时代在HTML文件中维护css相比，这种方式会有什么优劣处？ 有没有接触过Less、Sass、Stylus这一类CSS预编译框架？如何在Webpack接入这些工具？
接入Babel
babel core, babel preset, babel loader
@babel/preset-env @babel/preset-react @babel/preset-typescript
生成HTML
工具线
HMR
模块热替换
⚓ 当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。Tree-shaking
tree-shaking指的是消除没被引用的模块代码，减少代码体积大小，以提高页面的性能。
Loader组件
Loader：内容的转换
问题：Webpack只认识JS
