这是我参与【第五届青训营】伴学笔记创作活动的第14天。
什么是 Webpack
- 多份资源文件打包成一个 Bundle
- 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMR +开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
Webpack 打包核心流程
import module output
核心流程
Get Start
- 入口处理
从entry文件开始，启动编译流程
Dependencies Lookup
- 依赖解析
从entry文件开始，根据 "require orimport等语句找到依赖资源
Transform
- 资源解析
根据module配置，调用资源转移器，将png、Css 等非标准JS资源转译为 JS 内容
Combine Assets
4.资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS 文件
递归调用2、3，直到划所有资源处理完毕
模块化 + 一致性
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- Etc...
使用 Webpack
- 其它工具:
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包 以示例 oD Entry => Dependencies Lookup => Transform => Bundle => Output日 关键配置项介绍日D
Loader 组件
- less-loader: 实现 less => css 的转换
- css-loader:将 CSS 包装成类似 mo dule.exports="${css}"的内容，包装后的内容符JavaScript 语法
- style-loader: 将 css 模块包进 requ ire 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签
认识 Loader:其它特性
特点:
- 链式执行
- 支持异步执行
- 分 normal、pitch 两种模式
Plugin 组件
钩子的核心信息:
- 时机:编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情;
- 上下文:通过 tapable 提供的回调机制，以参数方式传递上下文信息;
- 交互:在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接口改变
如何学习 Webpack
入门级:学会灵活应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成
- Vue、React、 Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境
进阶:学会扩展 Webpack
- 理解 Loader、Plugin 机制，能够自行开发 Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
大师:源码级理解 Webpack 打包编译原理
- 阅读源码，
- 理解 Webpack 编译、打包原理，
- 甚至能够参与共建
