1 课程内容概括

本笔记对应的课程部分简要介绍了Webpack的简介。

2 资源管理难题

前端项目由各种资源构成，如何将这些资源管理起来就成为了一个值得关注的问题。如果使用手动管理的方式，当文件数目繁多时，过程也会非常繁琐；当代码有依赖时需要按照依赖的顺序写；开发与生产环境相同，难以接入TS、JS新特性，也难以接入Less、Sass等工具。此外，JS、图片、CSS资源管理模型也存在不一致的问题。

3 Webpack简介

由于资源管理面临难题，出现了前端工程的概念，同时出现了很多工程化工具。

Webpack本质上是一种前端资源的编译、打包工具，它可以将多份资源文件打包成一个bundle，并且支持babel、eslint、TS、CoffeeScript、Less、Sass，支持模块化处理CSS、图片等资源文件、支持HMR+开发服务器、支持持续监听与持续构建、支持代码分离、支持Tree-shaking、支持Sourcemap等。

4 使用Webpack

三步：安装、编辑配置文件、执行编译命令。

Webpack核心流程简化为5步：

1.入口处理，从entry文件开始启动编译流程

--递归开始--

2.依赖解析，从entry文件开始，根据require或者import等语句找依赖资源

3.资源解析，根据module的配置，调用资源解析器，将非标准的JS资源转译为JS内容。

--递归结束结束条件：所有资源处理完毕--

4.资源文件打包，将转译后的资源内容合并打包为可在浏览器运行的JS文件。

5 使用Webpack带来的好处

可以为项目带来模块化与一致性，可以将多个资源、文件合并成一个，从而减少HTTP请求数量，同时支持高级的JS特性或者TS、CoffeeScript方言。还可以统一图片、CSS、字体等其他资源的处理模型。

6 总结与思考

本笔记对应的课程内容介绍了Webpack需要解决的问题、Webpack的优势、简要的使用方法与工作流程。

Webpack简介 | 青训营笔记