前端工程化是一个高层次的思想，而模块化和组件化是为工程化思想下相对较具体的开发方式，因此可以简单的认为模块化和组件化是工程化的表现形式。

模块化和组件化一个最直接的好处就是复用，除了复用之外还有就是分治，我们能够在不影响其他代码的情况下，按需修改某一独立的模块或是组件，因此很多地方我们即使没有复用需要，也可以根据分治需求进行模块化或组件化开发。

什么是前端工程化

将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。

什么是模块化，模块化有什么好处

一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

js模块化方案很多有AMD、CommonJS、UMD、ES6 Module等。css模块化开发大多数是在less、sass、stylus等预处理器的import、minxin特性支持下实现。

模块化开发的好处

1. 避免变量污染，命名冲突
2. 提高代码复用率
3. 提高维护性
4. 依赖关系的管理
   为了实现模块化，出现了用于JavaScript模块管理的两大流行规范：commonJS和AMD。前者定义的是模块的同步加载，主要用于Node.js。同步加载在前端会导致整个页面等待，对前端并不适用，便出现了AMD。AMD采用异步加载方式，通过RequireJS等工具适用于前端。以RequireJS为例，这是一种在线“编译”模块的方案，相当于在浏览器中先加载一个AMD解释器，使浏览器认识define、export、module等相关命令，来实现模块化。后来ES6提供了对模块化的原生支持，它的目标是创建一种CommonJS和AMD使用者都愿意接受的方式，即拥有简洁的语法，又支持异步加载和配置模块加载。

webpack是一个预编译模块的方案。在发布前预编译好，不需要在浏览器中加载解释器。另外，直接写AMD或ES6的模块化代码，它都能编译成浏览器识别的JavaScript代码。甚至CommonJS规范的模块化，webpack也可以转换成浏览器使用的形式。
webpack是一个供浏览器环境使用的模块打包工具。webpack将项目中用到的一切静态资源都视为模块，模块之间可以互相依赖，webpack对它们进行统一的管理及打包发布。

webpack.jpg

从图中可以看出，webpack的作用是对项目中的静态资源进行统一管理，为项目的发布提供最优的打包和部署方案，可以把js、css、图片等资源集中打成一个或多个包文件。它具备编译打包css、预处理css、编译js和处理图片等许多功能，支持AMD和CommonJS规范，以及多种系统模块，现在已成为前端打包的主流工具。
webpack的主要特性如下：

1. 同时支持CommonJS和AMD模块。
2. 串联式模块加载器及插件机制，具有更好的灵活性和拓展性，例如对CoffeeScript、ES6的支持。
3. 可以基于配置或者智能分析打包成多个文件，实现分别满足公共模块和按需加载的需要。
   4.支持对css、图片等资源进行打包，无须依靠grunt或gulp等构件工具，简化工程配置。
   5.开发时在内存中完成打包，性能更高，完全可以支持开发过程的实时打包需求。
   6.对sourcemap有很好的支持，易于调试。

什么是组件化

页面上的每个独立的、可视/可交互区域视为一个组件

每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；由于组件具有独立性，因此组件与组件之间可以自由组合；页面不过是组件的容器，负责组合组件形成功能完整的界面；

AMD 与 CMD 区别