javascript - gulp+webpack+vue想做個全家桶，各位有什麼介紹的或是文章實例程式碼

Question

vue官網有vue-cli腳手架自備的webpack打包，但是我想讓gulp編譯，webpack打包，vue是框架，做個全家桶腳手架項目，不知如何著手，請求高手指教！

Answer 1

首先，為何要使用 Gulp 編譯呢？在剛開始了解 Webpack 時，答主也實作過 Gulp + Webpack 的工作流程，它能夠運作，也可以維護，但實際上它帶來的是不必要的複雜性。實際上建置系統中並沒有必須使用 Gulp 的任務。在 Gulp + Webpack 的專案中，需要維護兩套百行級的打包配置，這其實是不方便使用的。 Gulp 的功能完全可以用 NPM Script 取代，這也是目前的趨勢。你想維持已有的技術堆疊知識而想引入 Gulp 是可以理解的，不過這並不是必須的。

建議在理解 vue-cli 的 Webpack 設定前提下，精簡其程式碼，實作 vue + webpack 的設定模板。答主的實踐是，一個能滿足中等（萬行級）Vue 專案規模需求的Webpack 範本只需要一個config.js 就能放下，甚至不需區分webpack.dev.js 和webpack.prod.js 這些冗餘的模組。

作為參考，這是上文中百行級的Vue 中等規模項目模板，百行內的配置即實現了支援HMR、預處理器、依賴提取、內聯圖片、CSS 提取、HTML 生成、反向代理等常見的前端工程化功能：
https://github.com/doodlewind...

這是 Gulp + Webpack 專案中的 Gulpfile 範本：
https://github.com/doodlewind...