讲师：范文杰
为什么要学习Webpack？
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端的必经之路
01. 什么是Webpack？
前端项目由什么构成？——资源
- PNG
- JPG
- GIF
- WEBP
- JS
- TS
- css
- Less
- Vue
- JSX
- Sass
- Etc.
手动管理资源（旧时代）的问题：
- 依赖手工，比如有50个JS文件⋯操作，过程繁
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接人TS 或JS 新特性
- 比较难接人 Less、Sass 等工具
- JS、图片、CSS 资源管理模型不一致
Webpack本质上是一种前端资源编译、打包工具：
- 多份资源文件打包成一个 Bundle
- 支持 Babel、 Eslint、TS、 CoffeScrript、Less、 Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HIMR＋ 开发服务器
- 支持持续监听、持绒构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
- Etc.
02. 使用Webpack
核心流程（极度简化版）
- 入口处理：从‘entry’文件开始，启动编译流程
- ‘entry’
- ‘context’
- 依赖解析：从‘entry’文件开始，根据‘require’或‘import’等语句找到依赖资源
- ‘resolve’
- ‘externals’
- 资源解析：根据‘module’配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容（递归调用2、3直到所有资源处理完毕）
- ‘module’
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
- ‘optimization’
- ‘mode’
- ‘target’
模块化+一致性
- 多个文件资源合并成一个，减少 http请求数
- 支持模块化开发
- 支持高級 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- Etc.
怎么使用Webpack？
关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个or 若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
思考题
- Loader 有什么作用？为什么这里需要用到 css-loader， style-loader
- 与旧时代——在FIIMI 文件中维护css 相比，这种方式会有什么优劣处？
- 有没有找触过 Less、 Sass、Stylus 这一类css 预编译框架？ 如何在 Webpack接入这些工具？
接入Babel
- 安装依赖
- 声明产物出口‘output’
- 执行‘npx webpack’
- 思考题
-
Babel具体有什么功能？
-
Babel与Webpack分别解决了什么问题？为何两者能协作到一起了？
-
Tree- shaking dead code：
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
- 模块导出了，但未被其它模块使用
03. 进阶篇：理解Loader
问题：Webpack只认识JS：为了处理非标准JS资源，设计出资源翻译模块——Loader，用于将资源翻译为标准JS
认识Loader
- less-loader：实现less =＞css 的转换
- css-loader：将CSS 包装成类似 module.exports=“${css}” 的内容，包装后的内容符合 JavaScript 语法
- style-loader：将css 模块包进require 语句，并在运行时调用 injectStyle等函数将内容注入到页面的 style 标签
- 特点：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
常见Loader（建议掌握这些常见loader的功能和配置方法）：
- JavaScript
- Babel-loader
- Eslint-loader
- Ts-loader
- Buble-loader
- Vue-loader
- Angular2-template-loader
- CSS
- Css-loader
- Style-loader
- Less-loader
- Sass-loader
- Stylus-loader
- Postcss-loader
- HTML
- Html-loader
- Pug-loader
- Posthtml-loader
- Assets
- File-loader
- Val-loader
- Url-loader
- Json5-loader
理解插件
- 思考题：
- Loader 输入是什么？要求的输出是什么？
- Loader 的链式调用是什么意思？如何串联多个 Loader？
- Loader 中如何处理异步场景？
- 参考：《Webpack原理系列七：如何编写loader》
04. 进阶篇：理解插件
插件是什么？为什么这么设计？
很多知名工具，如：
- VS Code. Web Storm. Chrome. Firefox
- Babel. Webpack, Rollup, Eslint jalif
- Vue, Redux, Quill. Axios
等等，都设计了所谓"插件"架构，为什么？
这是一个特别复杂的过程，那么：
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性
- etc
心智成本高 =＞可维护性低 =＞生命力弱
插件架构精髓：对扩展开放，对修改封闭
甚至，Webpack本身的很多功能也是基于插件实现的
理解插件
首先：插件围绕“钩子”展开。钩子的核心信息：
- 时机'compier. hooks. compilation‘：编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情；
- 上下文‘compilation‘等：通过tapable提供的回调机制，以参数方式传递上下文信息；
- 交互'dependencyFactories. set'：在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接口改变。
思考题：
- Loader 与插件有什么区同点？
- “钩子”有什么作用？如何监听钩子函数？
- 参考
- 《Webpack 插件架构深度讲解》
- 《【万字总结】一文吃透Webpack 核心原理》
05. 学习方法
入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成 Vue、React、Babel、 Eslint、Less、 Sass、图片处理等工具的 Webpack 环境
- 掌握常见脚手架工具的用法，例如：Vue-cli、create-react-app、@angular/cli
新手向Webpack关键知识点
- 扩展
- 掌握常用loader
- 掌握常用plugin
- Html-webpack-plugin
- Clean-webpack-plugin
- Define-plugin
- Webpack-bundle-analyzer
- Mini-css-extract-plugin
- Imagemin-webpack-plugin
- Webpack-dashboard
- 基础配置
- entry
- context
- output
- mode
- target
- module
- plugins
- 工具类配置
- devtool
- devServer
- watch
- tree- shaking
- 场景化
- 学习vue-cil脚手架特性
- 学习create- react-app脚手架特性
- 如何优化编译性能
- 如何优化产物性能
进阶
- 理解 Loader、Plugin 机制，能够自行开发 Webpack 组件
- 理解常见性能优化手段，并能用于解快实际问题
- 理解前端工程化概念与生态现状
大师级
阅读源码，理解 Webpack 编译、打包原理，甚至能够参与共建
个人总结与感受
最后一节课结束撒花！！！最后一节课的难度也明显会比以前更深入一些，并且也更加透彻具体。这节课学习到了Webpack 的作用、理解 Webpack 配置结构、学习关键配置项、Loader 的作用与常用 Loader、插件基本形态与作用等等，对于Webpack体系有了初步的认识。老师在最后讲到学习方法，我认为我自己如果可以掌握入门应用就已经很不错了，还有很多需要学习的，加油吧！
