Webpack到底是做什么用的，什么时候应该使用它呢？

我们以使用了 webpack 和 npm script 作为项目构建工具的项目，和以下几种项目作对比

和只使用了Gulp / Grunt之类的流程自动化工具的项目作对比

其实Webpack和 glup/grunt 并没有太多的可比性。

Gulp/Grunt是一种能够优化前端的开发流程的工具，而 webpack 是一种模块化的解决方案之一，不过Webpack的优点（拥有强大的插件生态）使得Webpack可以替代Gulp/Grunt类的工具。gulp 也可以把 webpack 作为某个 task 的插件来调用，引入 gulp-webpack 即可。

Grunt和Gulp的工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

Webpack的工作方式：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

在webpack看来一切都是模块！ 这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS 和 fonts 以及 image 等等等，只要通过合适的loaders，它们都可以被当做模块被处理。其实webpack的官网图片清晰明了说明webpack是个什么鬼了。

和没有使用任何自动化工具，只有纯原生的html/css/js的项目对比

有了webpack就可以实现 组件化 了：

一个组件，多处调用，方便我们维护代码，想一想要是没有组件可以调用，同一段组件的代码复制粘贴得到处都是，以后要修改这个组件的时候多惨。有组件可以调用，不用复制粘贴一大段，又偷懒省了0.5s ，耶，好爽。vue的组件化就是基于webpack的配置实现的。

有了webpack就可以实现 源代码的代码拆分 了：

有职业道德的程序员都知道，一条函数尽量不要超过50行代码（准确来说是不要超过一个屏幕的高度），单个文件不超过200行，否则会大大增大维护难度。想一想你为了找到某条function的定义，鼠标滚轮都滚烂了，滚了好几屏显示屏，结果还是没找到，不会想一拖hai扔过去吗？？？作为一个维护过外包写的一个文件5000行代码的女人，说多都是泪，深刻体会到了代码规范的重要性。

有了 webpack 就能够在 dev 的时候，将源代码的每一个代码量巨大的大文件，尽量拆分成精悍的小文件，然后各个文件以 import ... from ... 或者 require( ' ' ) 之类的方式互相引入，在上线前再用 webpack 打包成一个大文件，（因为 http 请求是很珍贵的，成本高昂，如果直接以多个小文件互相依赖的方式放到线上，会增加线上代码的请求个数，同时各个依赖之间的加载顺序一旦发生错乱，js的执行则会报错。为了减少请求个数，同时不让js的加载阻塞页面渲染，上线前用 webpack 打包、压缩，是十分有必要的）

有了 webpack 就可以........ // 欢迎补充 O(∩_∩)O~~