这是我参与「第四届青训营」笔记创作活动的的第5天

一、本课内容：

1.Webpack是什么

2.Webpack怎么用

3.进阶：理解Loader

4.进阶：理解插件

5.Webpack学习方法

6.白阿白总结

7.引用参考

二、Webpack是什么：

解释：

顾名思义，用来pack（打包）Web的工具

Webpack可以将各种资源构成的项目编译并打包

而你要做的就是写好配置文件，也就是Webpack怎么用

当然，你也可以手动管理这些文件,但:

依赖手工，比如有50个JS文件...操作，过程繁琐
当代码文件之间有依赖的时候，就得严格按依赖顺序书写
开发与生产环境一致，难以接入TS或JS新特性
比较难接入Less、Sass等工具
JS、图片、CSS资源管理模型不一致这些都是引旧时代非常突出的问题，对开发效率影响非常大，直到🥶...出现了很多工程化工具🥵🥵🥵

功能：

它可以...：

多份资源文件打包成一个Bundle
支持 Babel、,Eslint、TS、CoffeScript Less、Sass
支持模块化处理Css、图片等资源文件
支持HMR+开发服务器
支持持续监听、持续构建
支持代码分离
支持Tree-shaking
支持Sourcemap

三、Webpack怎么用

EG：

graph LR
安装 --> 配置 -->编译

核心流程（极度简化）

有什么实践举例帮助理解知识点？

模块化+一致性：

1——多个文件合一，减少http请求数
2——支持模块化开发
3——支持高级JS特性
4——支持TypeScript,CoffeeScript方言
5——统一图片、CSS、字体等其他资源的处理模型

具体使用：

围绕下图展开：

流程：作用于流程中某个or若干环节，影响打包效果的配置项

工具：主流程之外，提供更多工程化能力的配置项

流程：

配置总览：

处理CSS
处理JS-接入Babel
工具线
- HMR——模块热替换：实时更新
- tree-shaking
- 其他工具，sourceMap.....

四、进阶：理解Loader

为什么要用Loader呢
因为Webpack只认识JS，为了处理非标准JS文件，设计了资源翻译模块Loader，用于将资源文件翻译为标准JS文件。

使用Loader
- 安装
- 链式调用
  - 其他特性\
- 如何编写？
- 常见Loader

五、进阶：理解插件

首先看一个编译流程图：

这是一个特别复杂的过程，那么：

新人需要了解整个流程细节，上手成本高
功能迭代成本高，牵一发动全身
功能僵化，作为开源项目而言缺乏成长性

graph LR
心智成本高 --> 可维护性低 --> 生命力弱

插件架构精髓：对扩展开放，对修改封闭

理解插件
- 钩子
小结：

六、Webpack学习方法

01.入门应用

理解打包流程
熟练掌握常用配置项、Loader、.插件的使用方法，能够灵活搭建集成 Vue、React、.Babel、.Eslint、Less、Sass、图片处理等工具的Webpack环境
掌握常见脚手架工具的用法，例如：Vue-cli、create- react-app、 @angular/cli

02.进阶

理解Loader、Plugin机制，能够自行开发Webpack 组件
理解常见性能优化手段，并能用于解决实际问题
理解前端工程化概念与生态现状

03.大师

阅读源码，理解Webpack编译、打包原理，甚至能够参与共建

七、白阿白总结：

个人看完感觉打包工具由四个部分组成：

enrty和output是基础的输入和输入
loader和plugins是拓展

加以应用和官方文档的查阅学习就好

八、引用参考：

1.官方手册：不会被阅读的课后阅读资料：

2.webpack 中文文档

Webpack🥵 ｜ 青训营笔记