这是我参与「第四届青训营 」笔记创作活动的的第13天
为什么要学习Webpack？
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
学习Webpack的目标
- 理解Webpack的基本用法
- 通过介绍Webpack功能、Loader与Plugin组件设计，建立一个知识体系
01.什么是Webpack
前端项目由什么构成？——资源
- 可以手动管理这些资源，但
- 依赖手工，比如有50个JS文件操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按照依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
- 这些都是旧时代非常突出的问题，对开发效率影响非常大。于是
什么是Webpack
Webpack本质上是一种前端资源编译、打包工具。
- 将图片、ts等非标准的js文件编译成js兼容的文件
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
02.使用Webpack
示例
核心流程
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持TypeScript、CoffeeScript方言
- 统一图片、CSS、字体等其他资源的处理模型
- etc...
使用webpack
使用方法基本围绕“配置”展开，而这些配置大致可划分为两类
- 流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
配置总览
使用
处理CSS
参考资料：
接入Babel
思考题：
- Babel具体有什么功能？
- Babel与Webpack分别解决了什么问题？为何两者能协作到一起了？
参考资料：
生成HTML
- 思考题： 相比于手工维护HTML内容，这种自动生成的方式有什么优缺点？
- 参考资料： html-webpack-plugin
工具线
HMR
Hot Module Replacement——模块热替换
Tree-Shaking
树摇，用于删除Dead Code
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
- ...
03.进阶篇：理解Loader
使用Loader
链式调用：
- less-loader:实现less=>css的转换
- css-loader：将CSS包装成类似module。exports="${css}"的内容，包装后的内容符合JavaScript语法
- style=loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
其它特性
如何编写Loader
常用Loader
04.进阶篇：理解插件
插件是什么？为什么这么设计？
理解插件
参考：
《Webpack插件架构深度解析》
《[万字总结]一文吃透Webpack核心原理》
小结
- Webpack的作用
- 理解Webpack配置结构，学习关键配置项
- Loader的作用与常用的Loader
- 插件基本形态与作用
