問題描述

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

問題解答

首先，為何要使用 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...