webpack是什么？（各类概念比较）

首先列出新手容易混淆的几个家伙。

• gulp
• grunt

---

• require.js
• sea.js
• browserify
• webpack

如分割线所示，分割线之内的家伙，才是更加接近、可以比较的概念

gulp和grunt

gulp之流是工具，它可以优化前端的工作流程。例如：自动刷新页面、压缩css / js / html ，less编译成css 等。
你只需要使用gulp 并且 配合相关的插件，就可以将之前手动完成的工作交给gulp代为完成。

require.js 、sea.js 和 browserify 、webpack

而说到require.js，就要提到其他几个模块化方案，常见的包括：sea.js / browserify / webpack ，他们都属于 模块化解决方案

这其中的前两者 和 后两者的模块化解决方案又有些不同之处。

• sea.js和require.js是 “在线”编译模块化方案

• 他们相当于在页面上加载一个CMD或者AMD解释器，这样浏览器就能认识define / export / module等标识，你把代码写到define里，从而实现模块化

• browserify和webpack是 预编译模块化集成方案
  • 这种方案是预编译的。不需要加载什么解释器，浏览器可以识别你预编译完成后的代码。不管你在本地是用的 AMD / CMD / ES6 风格的模块化方案，在预编译后，都是浏览器可以直接识别的JavaScript

所以gulp是工具，webpack、sea.js是模块化解决方案,Gulp也可以配置seajs、requirejs甚至webpack的插件。