这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
以下为今日课上笔记内容
为什么要学习 Webpack?
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉 Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路 webpack 知识体系
一. 什么是 Webpack
当然，可以手动管理这些资源，但
- 依赖手工，比如有50个JS文件...操作，过程繁琐。
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入 JS 或JS 新特性
- 比较难接入 Less、Sass 等工具JS、图片、CSS 资源管理模型不一致 这些都是旧时代非常突出的问题，对开发效率影响非常大，直到...
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个 Bundle
- 支持 Babel、 Eslint、JS、CoffeScript、 Less、Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMR + 开发服务器支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap ...
二.使用 Webpack
1.使用 Webpack -- 示例
2.核心流程 -- 极度简化版
3.模块化 + 一致性
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- Etc..
4.使用 Webpack
关于 Webpack 的使用方法，基本都围绕“配置展开，而这些配置大致可划分为两类
- 流程类: 作用于流程中某个 or 若干个环节直接影响打包效果的配置项c
- 工具类: 主流程之外，提供更多工程化能力的配置项
5.使用 Webpack --流程类配置
6.使用 Webpack -- 配置总览
按使用频率
- entry / output
- module / plugins
- mode
- watch / devServer / devtool
7.使用 Webpack
8.使用 Webpack -- 处理 CSS
9.使用 Webpack 一- 接入 Babel
10.使用 Webpack--生成 HTML
11.使用 Webpack -- 工具线
12.使用 Webpack--HMR
13.使用 WebpackTree -- Shaking
Tree-Shaking - 树摇，用于删除 Dead Code
Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
Tree-Shaking
- 模块导出了，但未被其它模块使用
开启 tree-shaking:
- mode: “production”；
- optimization.usedExports: true: PS: 对工具类库如 Lodash 有奇效
14.使用 Webpack
其它工具:
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包 ...
三.进阶篇: 理解 Loader
1.问题: Webpack 只认识JS
为了处理非标准JS 资源，设计出资源翻译模块 Loader用于将资源翻译为标准 JS.
2.使用 Loader
3.认识 Loader:链式调用
- less-loader:实现 less => css 的转换
- less-loader：将 CSS 包装成类似 module.exports=“[scss]”的内容，包装后css-loader: 的内容符合 JavaScript 语法
- style-loader: 将 css 模块包进 require 语句，并在运行时调用 iniectStyle 等函数将内容注入到页面的 style 标签 4.认识 Loader:其它特性
特点:
- 链式执行
- 支持异步执行
- 分 normal、pitch 两种模式
5.如何编写 Loader
6.常见 Loader
站在使用角度，建议掌握这些常见 Loader 的功能、配置方法
四.进阶篇: 理解插件
1.插件是什么?为什么这么设计?
这是一个特别复杂的过程，那么:
- 新人需要了解整个流程细节，上手成本高c
- 功能选代成本高，牵一发动全身c
- 功能僵化，作为开源项目而言缺乏成长性
- ... 心智成本高 => 可维护性低 => 生命力弱
插件架构精髓: 对扩展开放，对修改封闭
甚至，Webpack 本身的很多功能也是基于插件实现的
2.理解插件
首先:插件围绕 钩子 展开
钩子的核心信息 1）时机: 编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情。
2）上下文: 通过 tapable 提供的回调机制，以参数方式传递上下文信息。
3）交互: 在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变。
时机:compier.hooks.compilation
参数:compilation'等
交互:dependencyFactories.set
小结
- 我们前面学了 Webpack 的作用
- 理解 Webpack 配置结构，学习关键配置项
- Loader 的作用与常用 Loader
- 插件基本形态与作用
五.学习方法
1.入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境掌握常见脚手架工具的用法，例如: Vue-cli、 create-
- react-app、@angular/cli
2.进阶
- 理解 Loader、Plugin 机制，能够自行开发 Webpack 组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
3.大师级
- 阅读源码，理解 Webpack 编译、打包原理，甚至能够参与共建
知识点
