这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
前端与Webpack
1、什么是Webpack
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个 Bundle
- 支持Babel、Eslint、TS、CoffeScript、 Less、Sass
- 支持模块化处理css、图片等资源文件支持 HMR +开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
2、Webpack核心流程
- 入口处理
开始读entry文件，开始启动编译的过程
- 依赖解析/依赖收集
开始找到依赖irequire和import两个关键字组成的导入导出语句
- 资源处理
非标准JS资源转译为JS内容
- 插入一些运行式的代码、优化代码、代码合并、代码混淆
注：其中2.3.步骤是递归处理的过程，直到所有资源处理完。
3、模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS 特性
- 支持 Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc. . .
4、Webpack流程类配置
（1）entry
输入
- entry
- context
（2）require、import
模块解析
- resolve
- externals
（3）module
模块转译
- module
（4）output
后处理
- optimization
- mode
- target
5、Webpack一些配置
- entry 定义当前项目的入口，webpack会从这个入口开始处理整个项目
- context：webpack在运行的时候从哪个文件夹找资源
- output 定义当前项目最终打包完之后放到哪里（出口）
- module用来定义Loader的属性
- plugins用来定义webpack插件
- mode定义后，长度压缩，最终会简洁很多
一个webpack中至少要用到entry和output两个。
6、Webpack只认识JS
Webpack只认识js代码，其他例如css等会报错
解决办法：加一个loader就可以了
loader的核心功能就是将非标准JS资源转换成标准JS资源，即Webpack可识别和处理JS的内容
7、Loader链式调用
- less-loader: 实现less => css的转换
- css-loader: 将CSS包装成类似module.exports = "${css}”的内容，包装后的内容符合JavaScript语法
- style-loader: 将css模块包进require语句，并在运行时调用injectStyle 等函数将内容注入到页面的style标签
8、Loader特性
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
9、钩子是什么？
可以理解为：一个事件
运行到某个过程时，触发一个事件。这个事件较复杂。
钩子的核心信息:
- 时机:编译过程的特定节点,Webpack会以钩子形式通知插件此刻正在发生什么事情;
- 上下文:通过 tapable 提供的回调机制,以参数方式传递上下文信息;
- 交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
