这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
什么是Webpack
前端项目是由资源组成的。
手动管理资源出现的问题：依赖手工，有多个JS文件操作时过程繁琐；当代码文件之间有依赖的时候，就要严格的按依赖顺序书写；开发与生产环境一致，难以接入TS或JS新特性；比较难接入Less、Sass等工具；JS、图片、CSS资源管理模型不一致。
现在为了解决这些问题出现了很多工程化工具。
Webpack本质上是一种前端资源编译、打包工具。可以将多份资源文件打包成一个Bundle；支持Babel、Eslint、TS、CoffeScript、Less、Sass；支持模块化处理css、图片等资源文件；支持HMR+开发服务器；支持持续1监听、持续构建；支持代码分离；支持1Tree-snaking；支持Sourcemap等等。
核心流程
入口处理：从entry文件开始，启动编译流程
依赖解析：从entry文件开始，根据require or import等语句找到依赖资源
资源解析：根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化和一致性
多个文件资源合并成一个，减少http请求数；支持模块化开发；支持高级JS特性；支持Typescript、CoffeeScript方言；统一图片、css、字体等其他资源的处理模型
Webpack配置
流程类：作用于流程中某个or 若干个环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化能力的配置项
loader特点
链式执行；支持异步调用；分normal、pitch两种模式
插件钩子的核心信息
时机、上下文、交互。
