前端模块化与webpack介绍 前端模块化的优点

模块化的目的是使代码可以重用，模块化在任何开发中都是必不可少的。前端的模块化是Node.js带来的新产物，若干年前，前端模块化的需求并不是很强烈，因为在浏览器里运行的逻辑都比较简单。随着Node.js的出现，JavaScript开始在后端发挥作用，为了代码重用，模块化就变得不可或缺。随着前端快速发展，前端业务越来越复杂，模块化的需求开始出现。

为了实现模块化，出现了用于JavaScript模块管理的两大流行规范：CommonJS和AMD。前者定义的是模块的同步加载，主要用于Node.js。同步加载在前端会导致整个页面等待，对前端并不适用，便出现了AMD。AMD采用异步加载方式，通过RequireJS等工具适用于前端。以RequireJS为例，这是一种在线“编译”模块的方案，相当于在浏览器中先加载一个AMD解释器，使浏览器认识define、exports、module等相关命令，来实现模块化。后来ES 6提供了对模块的原生支持，它的目标是创建一种CommonJS和AMD使用者都愿意接受的方式，既拥有简洁的语法，又支持异步加载和配置模块加载。

而目前更通用的是browserify、webpack等技术，是一个预编译模块的方案。这个方案更加智能，因为它是在发布前预编译好的，不需要在浏览器中加载解释器。另外，直接写AMD或ES 6的模块化代码，它都能编译成浏览器识别的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、ES 6的支持。

（3）可以基于配置或者智能分析打包成多个文件，实现分别满足公共模块和按需加载的需要。

（4）支持对css、图片等资源进行打包，无须依靠grunt或gulp等构建工具，简化工程配置。

（5）开发时在内存中完成打包，性能更高，完全可以支持开发过程的实时打包需求。

（6）对sourcemap有很好的支持，易于调试。