这是我参与「第四届青训营 」笔记创作活动的的第15天，今天的课程是「Webpack 知识体系」，老师主要讲解了 什么是Webpack 、 使用Webpack 、 理解Loader 、 理解插件 等内容。

什么是Webpack

前端项目由许多资源构成，在旧时代，这些资源通常是手工管理。但手工管理有如下缺点：
1、依赖手工，过程繁琐
2、当代码文件之间有依赖的时候，就得严格按依赖顺序书写
3、开发与生产环境一致，难以接入TS或JS新特性
4、比较难接入Less、Sass等工具
5、JS、图片、CSS资源管理模型不一致

因为这些缺点，出现了很多工程化工具。而某种程度上正是这些工具的出现，才有了前端工程这一概念。

Webpack本质上是一种前端资源编译、打包工具：

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

使用Webpack

示例

核心流程

1、入口处理
从'entry'文件开始，启动编译流程
2、依赖解析
从'entry'文件开始，根据'require' or 'import'等语句找到依赖资源
3、资源解析
根据'module'配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
（递归调用2、3，直到所有资源处理完毕）
4、资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

使用Webpack

关于Webpack的使用方法，基本都围绕“配置”展开：

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项

理解Loader

为了处理非标准JS资源，设计出资源翻译模块——Loader用于将资源翻译成标准JS。

• less-Loader：实现Less=>css的转换
• css-Loader：将CSS包装成类似module.exports="${css}'的内容，包装后的内容符合JavaScript语法。
• style-Loader：将CSS模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

如何编写Loader

理解插件

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