有沒有好的gulp+webpack的例子啊？求指教，分開來都是會用的，但是結合起來就有些懵。。

01-23

目前前端構建就差著一環了，但是苦於不會gulp和webpack的結合，希望大家給一些意見，之前都是做多人合併開發的，所以構建這部分還不太熟，現在要做一個自己的項目，所以這部分就有些困難，希望大家給一些意見，是gulp+webpack+react+es6的。

如果你想要和其它 gulp 插件，比如 gulp-sass 那樣，配置，輸入輸出可以全都由 Gulp 控制的「整合」話，參見 webpack 文檔（usage with gulp）所述的 GitHub - shama/webpack-stream: Run webpack through a stream interface 這個包的 README 介紹。

實際使用上，有個笨蛋之前寫了個小程序同樣的是 gulp+webpack+react+es6，即是用的 webpack-stream 與 gulp 協作，可參考一番 gulpfile 與項目結構 GitHub - frantic1048/mangekyou: [作業][數字圖像處理]簡易圖像處理程序 ~(&>_&<~)

前不久在公司分享了react技術棧。

webpack作為初級編譯工具，

gulp作為最終編譯工具，來定位比較好解釋，webpack可以很方便引用node_module包，降級es6，樣式注入等，作為最初級的功能定位性價比最高，webpack輸入輸出都以js為主，對html兼顧較少，可用組件不多很難達到可用的程度。

依靠gulp豐富的組件可以很好地讓js和html聯動配置，控制webpack，實施高度自動化。

建議查看官方文檔usage with gulp。

目前我的做法是gulp針對webpack只是作為啟動作用，gulp＋webpack配合處理打包。

var shell = require("gulp-shell");


gulp.task("webpack", shell.task([

"webpack --config --process webpack.config.js"

]));

gulp.task("webpackDev", shell.task([ "webpack --config webpack.dev.config.js" ]));

在公司項目中的實戰，gulp+webpack。把webpack當成gulp的一個插件來使用，適用於多頁面，當然單頁面也不是問題。每個項目獨立一個配置。

1、項目開始前，通過gulp init -p YourProjectName 來初始化項目

2、開發和發布兩套命令，開發：gulp，發布：gulp release

3、需要自行編寫gulp插件來替換html中引用資源的路徑，原理也很簡單，在構建webpack模塊後，將產出的文件列表與原文件的映射關係保存在數組，查找html中引用的js路徑，替換成hash後就可以了。

通過以上方法，就可以滿足項目的需求，基本上做到自動化構建。

具體可以參照GitHub - iamaddy/webpack-example: webpack

官網就有例子