webpack+browserify+gulp+grunt等的区别

webpack和browserify的区别

一、

选择不同的前端构建工具，也就意味着不同的前端开发体系。
只要业务足够简单，只需要打包一个文件，那么选择什么构建工具都没问题，有问题的是有一定规模的网站，如果还是只打包成一个文件，那么只做一个很小的改动时，意味着都要重新下载打包文件。

webpack相比browserify，更加傻瓜式、一体化。而browserify则需要自行配置。相对的，进行源码分析和改进时，webpack更加复杂，而browserify则比较容易。

知乎：https://www.zhihu.com/question/40598635
简单来说，webpack 太复杂，是比较全面的解决方案（因此配置也比较复杂），而 browserify 只是一个核心，其本身也是由不同模块组成的，更符合 unix 的干好一件事的哲学。用 webpack 的某些功能和 browserify 去比较是不太公平的，因为哲学不一样。browserify 核心代码没多少，都拆分成模块了，你花一天时间大概过一篇，然后自己动手修改扩展需要的部分就好，这样你能对你的项目有很强的把控。而 webpack 是另一条路，相当于外包了前端构建这部分，虽然直接上手可能很方便，但是遇到坑的时候，或者需要自己实现一点什么想法的时候，可能会比较困难和麻烦一点。

二、

参考：https://zhuanlan.zhihu.com/p/27046322

browserify跟webpack差不多同期出现，但是大家常用webpack而不是browserify的原因有：

• browserify是遵循commonjs模块规范的，对于AMD和ES6模块规范不适用。
• browserify是专门解决js文件的加载而存在的，其他资源的加载并不完善，为了支持其他资源加载，总是需要配合gulp\grunt来使用，增加了工作量和工作难度。
• browserify无法实现多文件打包，即无法实现按需加载，每次加载页面都是全量加载js。

这四个工具的区别：

• gulp和grunt是前端自动化构建的工具，帮助用户完成js\css压缩、less编译等（只不过现在webpack也可以完成压缩等任务，可以替代gulp的这部分功能）。
• webpack和browserify是前端模块化方案，与seajs和requirejs是一个东西，只不过seajs和requirejs是在线编译方案，引入一个CMD\AMD编译器，让浏览器能认识export、module、define等，而webpack和browserify是预编译方案，提前将es6模块、AMD、CMD模块编译成浏览器认识的js。
• 他们之间的区别见以上两点，只不过相互之间也会有一些相似的功能。
• grunt配置复杂繁重，是基于文件流的操作，比较慢；gulp是基于内存流的操作，配置轻量级，代码组织简单易懂，异步任务。
• webpack的话，就是配置复杂，文档杂乱，插件繁多，难于上手。

参考：http://blog.csdn.net/xllily_11/article/details/51782005

这篇文章 讲了目前常见的最佳体验：
package.json中的scripts命令+webpack，实在无法实现时，再引入gulp等即可。