前端开发趋向于模块化、组件化、工程化，主要是为了提升开发效率，工程化建设和工具链打造是重头。
1.从问题开始
- 什么是模块化开发？
- 为什么使用Webpack？
- Webpack中有哪些配置，帮我们解决什么问题？
- Webpack中有哪些概念？
- Webpack内核和原理是如何实现的？
- Webpack除了打包还能做什么？
2.Webpack学习顺序
- Webpack开发配置：是什么，怎么用
- Webpack内核原理：工作流、重要的对象和实现（流程机制）
- Webpack工程化实践：开发中面临的现实问题和需求
3.前端模块化
前端模块化主要指JS模块，常见的是NodeJS的NPM包，每个模块可能是最小甚至是最优的代码组合，也可能是解决某些问题由很多特定模块组成的大模块。
编写代码常见copy，但是copy太多，代码的可维护性会下降。
3.1 JS模块化规范
前端的模块化规范有CommonJS、AMD、ES6 Module、CMD、UMD等。
3.1.1 CommonJS
NodeJS采用这种模块化方案。
是同步加载模块依赖的方式。
-
require：引入模块 -
exports：导出模块内容 -
module：模块本身
3.1.2 AMD
RequireJS提出并完善的一套模块化规范。
是异步加载模块依赖的方式。
- require：引入模块
- id：模块id
- dependencies：模块依赖
- factory：模块的工厂函数，模块的初始化操作函数
3.1.3 ES6 Module
ES6提出的模块化规范。
- import：引入模块依赖
- export：模块导出
3.2 CSS的模块化
CSS使用@import引入自己的模块依赖。
在CSS的预处理器Less或者Sass中，@import还可以导入一些变量、函数和mixin的定义。
@import 'hello.css';
4.前端工程化面临的问题
- 模块多了，依赖如何管理？
- 页面复杂度提升以后，多页面、多系统、多状态怎么做？
- 团队扩大以后，如何协作？
- 如何解决多人研发中的性能、代码风格问题？
- 如何权衡研发效率与产品迭代的问题？
前端工程化的发展，得益于NodeJS的发展，让我们可以使用工程化工具来解决问题。
4.1 Grunt、Gulp工程化
早期前端工程化，以Grunt、Gulp等构建工具为主，主要解决重复任务的问题，它们将某些功能拆解成固定步骤的任务，然后编写工具来解决。如：图片压缩、地址添加hash、替换等，这些都是固定套路的重复工作。主要是面向结果和流程。
4.2 Webpack工程化
Webpack从JS模块化依赖打包开始，使用强劲的插件机制，解决前端资源依赖管理问题，依赖社区力量形成前端工程化解决方案。主要是面向JS。
5.关于Webpack
5.1 What is Webpack？
Webpack本质是JS应用程序的静态模块打包器（static module bundler）。
image.png
Webpack在处理应用程序时，会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有依赖生成到一个或多个的bundle。
5.2 Webpack解决什么问题？
5.2.1 各类构建工具的打包思路
- Grunt、Gulp：
遍历源文件→匹配规则→打包，做不到按需加载，对于打包的资源，页面用不用也是不关心的。 - Webpack：从入口文件开始，经过模块依赖加载、分析、打包三个流程完成项目构建。在加载、分析、打包的三个过程中，可以做诸如
code split（拆分公共代码）的解决方案。
用人话来说，Webpack是面向JS模块的；Grunt、Gulp是面向结果和流程的；
5.2.2 Webpack解决的传统构建工具问题
- 模块化打包，一切皆模块（JS、CSS）
- 语法糖：ES6转换ES5、TypeScript
- 预处理器编译：Less、Sass、Stylus
- 项目优化：压缩、CDN
- 解决方案封装：Loader和插件机制，完成解决方案的封装，例如PWA
- 流程对接：测试流程、语法检查等
