这是我参与「第四届青训营 」笔记创作活动的的第12天
为什么要学习Webpack？
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的的核心竞争力
- 高阶前端必经之路
课程内容
主要内容:
- 什么是 Webpack
- Webpack 打包核心流程
- 示例
- Entry => Dependencies Lookup => Transform => Bundle => Output
- 关键配置项介绍
- Loader 组件
- Plugin 组件
- 如何学习 Webpack
- 入门级:学会灵活应用
- 进阶:学会扩展 Webpack
- 大师:源码级理解 Webpack 打包编译原理
课程目标
- 理解 Webpack 的基本用法
- 通过介绍 Webpack 功能、Loader 与 Plugin 组件设计，建立一个知识体系
- 不会事无巨细，介绍 Webpack 所有
- 也不是深入源码，讲解底层实现原理
- 我会尽量不涉及复杂繁琐的概念，也希望同学们能持续集中精神，跟上课程进度。
什么是Webpack
前端项目由什么构成？ ----资源
使用Webpack
使用Webapck - 示例
核心流程 --- 极度简化板
模块化 + 一致性
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型6 - Etc...
那么，怎么使用Webpack
使用Webpack
使用Webpack - 流程类配置
使用Webpack - 配置总览
使用Webpack
使用Webpack - 处理css
使用Webpack
使用Webpack
问题:
- Loader 有什么作用?为什么这里需要用到 css-loader、style-loader
- 与旧时代 -- 在 HTML 文件中维护 css 相比，这种方式会有什么优劣处?
- 有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架?如何在 Webpack 接入这些工具?
- 参考资料:
使用Webpack - 接入Babel
使用Webpack
思考题:
- Babel 具体有什么功能?
- Babel 与 Webpack 分别解决了什么问题?为何两者能协作到一起了?
- 参考资料:
使用Webpack - 生成HTML
使用Webpack
思考题：
- 相比于手工维护HTML内容，这种自动生成的方式有什么优缺点？ 参考资料：
- webpack.js.org/plugins/htm…
使用Webpack - 工具线
使用Webpack - HMR
参考：mp.weixin.qq.com/s/cbYMpuc4h…
使用Webpack - Tree-Shaking
使用Webpack
进阶篇：理解Loader
问题：Webpack只认识JS
使用Loader
认识Loader：链式调用
认识Loader：其他特性
参考：mp.weixin.qq.com/s/TPWcB4MfV…
如何编写Loader
参考：mp.weixin.qq.com/s/TPWcB4MfV…
常见Loader
理解插件
思考题：
- Loader输入是什么？要求的输出是什么？
- Loader的链式调用是什么？如何串联多个Loader？
- Loader中如何处理异步场景？ 参考：mp.weixin.qq.com/s/TPWcB4MfV…
进阶篇：理解插件
插件是什么？为什么这么设计？
很多知名工具，如:
- VS Code.Web StormChromeFirefox
- Babel.Webpack、Rollup、Eslint
- Vue、Redux、Quill、Axios
- 等等，都设计了所谓“插件”架构，为什么?
甚至，webpack本身的很多功能也是基于插件实现的
理解插件
用起来很简单，但写起来。。。
思考题：
- Loader与插件有什么区同点？
- “钩子”有什么作用？如何监听钩子函数 参考：mp.weixin.qq.com/s/tXkGx6Ckt…
参考：mp.weixin.qq.com/s/SbJNbSVzS…
