这是我参与「第四届青训营 」笔记创作活动的第九天
1. 为什么要学习webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队里总要有几个人熟悉webpack，可以形成个人的核心竞争力
- 高端前端的必经之路
2. 什么是webpack
远古时代--手动管理
然后就迎来了webpack的时代
3. webpack配置
3.1 流程类配置
3.2 工具类配置
3.3 文件结构
3.3 loader的一些问题
- loader有什么作用，为什么这里需要用到css-loader、style-loader？
- 与旧时代--在html文件中维护css相比有什么优点？
- 有没有接触过less、sass、stylus这一类css预编译框架们如何在webpack中接入这些工具？
4. babel
babel本质上是js代码的转译工具
在es6刚推出的时候，很多的浏览器都不支持es6的特性，所以就需要将es6代码转换为低版本的代码
4.3 bable的一些问题
- babel具体有什么功能？
- babel与webpack分别解决了哪些问题？为什么两者可以协作在一起
5. 使用webpack
5.1 case
5.2 核心流程-精简版
5.4 webpack一些功能
5.5 使用webpack生成css
5.6 使用webpack生成html
就是用到了一个插件
- 相比于手工维护html内容，这种自动生成的方式i有什么优缺点
5.7 HTR
模块热替换，实际上就是实时刷新，在写完代码之后可以立即更新
还可以加一个watch：true，持续的监听构建
5.8 Tree-Shaking 树摇
就是用来删除一些没有用到的代码
开启树摇方法
5.9 一些别的工具项
- 除了前面提到的内容，还有那些配置可以划分为“流程类”配置/
- 工具类配置具体有什么作用？用到了什么技术？devtool/cache/stat等
6. 进阶 理解loader
loader做的事情实际上就是内容转化，因为webpack只认识js代码，如果要打包css或者图片就会报错，这个时候就需要用到loader，将非js资源转换为js资源
链式调用
其它特性
6.2 如何编写loader
6.3 常见的loader
6.4
- loader输入是什么，输出是什么
- loader的链式调用是什么意思？如何串联多个loader
- loader中如何处理异步场景
7. 进阶 理解插件
7.1 插件是什么？为什么这么设计
精髓：对扩展开放，对修改封闭
甚至可以说，整个webpack就是由一堆插件构建起来的
钩子：可与理解为一个事件，在一个特点的条件下会被触发
- loader与插件有什么区同点
- “钩子”有什么作用，如何监听钩子函数?
7. 学习方法
- 主要还是多查看官方问挡，这是前端学习非常重要的一个途径
- 然后可以尝试自己开发插件和配置
