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等即可。