这篇文章是翻译的pro react 的webpack appendix A。

webpack是什么？

通过几年的javascript发展，网页的javascript代码从几乎没有或者一两个文件发展到具有复杂的javascript代码和复杂的javascript依赖数。

帮助处理javascript越来越复杂，社区提出了一些方法来处理这个问题：

• javascript的模块化（module），把大的javascript文件分开，不同的功能的javascript放到不同的文件中。
• 预处理或者预编译（pre-processor），可以把现阶段浏览器不支持的语言比如coffeescript，es6等等来编译成为'原生'的javascript。

尽管这些方法非常有帮助，但是相应的我们在开发阶段需要多引入一个步骤-打包和编译步骤，我们需要绑定javascript文件和编译这些javascript。这个就是webpack可以大显神通的地方。

webpack是一个模块打包工具，一个可以自动分析项目的文件结构，寻找javascript的module，和其他的资源比如css，图片等等，来打包供给浏览器使用。

webpack grunt gulp 之间的比较

webpack不同于grunt gulp等任务执行工具和打包工具，它本身严格来说并不是一个打包工具，它依赖很多loader和plugins，后面会讲到。

像grunt和gulp来实现打包，它是按配置的要求寻找相应的文件，然后编译和打包。 下面这个图展示了gulp或者grunt的打包过程。

Paste_Image.png

而webpack却是整体的分析这个项目，获得整体的依赖关系，然后根据不同的资源采用相应的loader来进行编译和打包。

Paste_Image.png