模块化的目的是让代码可重用，模块化在任何开发中都是必不可少的。 后端模块化是Node.js带来的新产品。 几年前，由于浏览器中运行的逻辑比较简单，对后端模块化的需求不是很强烈。 随着 Node.js 的出现，JavaScript 开始在前端发挥作用，模块化成为代码复用不可或缺的一部分。 随着后端的快速发展，后端业务越来越复杂，模块化的需求开始显现。
为了实现模块化，出现了两种流行的 JavaScript 模块管理规范：CommonJS 和 AMD。 后者定义了模块的同步加载，主要用在Node.js中。 后端同步加载会导致整个页面等待，这对后端不适用，出现AMD。 AMD采用异步加载，通过RequireJS等工具应用到后端。 以 RequireJS 为例。 这是一个在线“编译”模块的解决方案，相当于先在浏览器中加载一个AMD类库，让浏览器能够识别define、exports、module等相关命令webpack自动部署，实现模块化。 后来，ES6 提供了对模块的原生支持。 它的目标是创建一种CommonJS和AMD用户乐于接受的方法，不仅有简单的句型，而且支持异步加载和配置模块加载。
目前比较常见的技术有browserify、webpack等技术，都是预编译模块的解决方案。 这种方案更加智能，因为它是在发布前预编译的，不需要在浏览器中加载类库。 另外webpack自动部署，你可以直接编写AMD或ES6模块化代码，并且可以将其编译成浏览器识别的JavaScript代码。 甚至CommonJS规范、browserify、webpack的模块化都可以转化为浏览器使用的方式。 Webpack相当于browserify的增强版。 它刚诞生的时候是针对小型单页应用的，而且它对React的支持是最好的，所以本书主要介绍webpack。
Webpack 是一个针对浏览器环境的模块打包工具。 Webpack 将项目中使用的所有静态资源视为模块。 模块可以相互依赖。 Webpack统一管理、打包、发布。 下面引用webpack官方图片来说明webpack的作用。
从图中可以看出，webpack的作用是统一管理项目中的静态资源，为项目发布提供最优的打包和部署方案。 它可以将应用程序中的js、css、图片等资源集中打包成一个或多个包文件。 它具有编译打包css、预处理css、编译js、处理图像等多种功能。 它支持AMD和CommonJS规范，以及多种系统模块。 现在已经成为后端打包的主流工具。
webpack的主要特点如下：
(1) 同时支持 CommonJS 和 AMD 模块。
（2）串行模块加载器和插件机制具有更好的灵活性和可扩展性，例如对CoffeeScript和ES6的支持。
（3）可以根据配置或智能分析打包成多个文件，分别满足公共模块和按需加载的需求。
（4）支持css、图片等资源的打包，无需使用grunt或gulp等创建工具，简化项目配置。
(5)开发时打包在显存中完成，具有更高的性能，可以完全支持开发过程的实时打包要求。
(6)对sourcemap有良好的支持，易于调试。
