Webpack工程化学习 01 带一点问题来看

前端开发趋向于模块化、组件化、工程化，主要是为了提升开发效率，工程化建设和工具链打造是重头。

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
• 流程对接：测试流程、语法检查等