这是我来参加[第五届青训营]笔记创作活动的第十三天。
今天跟着范文杰老师学习Webpack的知识体系。
为什么前端需要Webpack？
- 可以理解前端工程化的概念，学会使用工具
- 提高个人核心竞争力
- webpack是前端工程师成为高阶工程师的必经之路
Webpack本质上是一种前端资源编译、打包工具
Webpack打包的核心流程：
- 入口处理：从'entry'文件开始，启动编译流程
- 依赖解析：从'entry'文件开始，根据'require'or'import'
- 资源解析：根据'module'配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容(递归调用2、3知道所有资源处理完毕)
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、css、字体等其他资源的处理模型
Webpack流程配置
使用loader
- less-loader:实现less=>css的转换
- css-loader:将CSS包装成类似module.exports="${css}"的内容，包装的内容符合javaScript语法
- style-loader:将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
特点：链式执行；支持异步执行；分normal、pitch两种模式。
编写loader
理解插件
总结：本节课学习了前端高级工具Webpack，了解到他的作用以及如何去配置和使用，受益匪浅。
