問題描述

vue官網(wǎng)有vue-cli腳手架自帶的webpack打包，但是我想讓gulp編譯，webpack打包，vue是框架，做個(gè)全家桶腳手架項(xiàng)目，不知如何著手，請(qǐng)求高手指教！

問題解答

首先，為何要使用 Gulp 編譯呢？在剛開始了解 Webpack 時(shí)，答主也實(shí)現(xiàn)過 Gulp + Webpack 的工作流，它能夠工作，也可以維護(hù)，但實(shí)際上它帶來(lái)的是不必要的復(fù)雜性。實(shí)際上構(gòu)建系統(tǒng)中并沒有必須使用 Gulp 的任務(wù)。在 Gulp + Webpack 的項(xiàng)目中，需要維護(hù)兩套百行級(jí)的打包配置，這其實(shí)是不方便使用的。Gulp 的功能完全可以用 NPM Script 替代，這也是目前的趨勢(shì)。你想維持已有的技術(shù)棧知識(shí)而想引入 Gulp 是可以理解的，不過這并不是必須的。

建議在理解 vue-cli 的 Webpack 配置前提下，精簡(jiǎn)其代碼，實(shí)現(xiàn) vue + webpack 的配置模板。答主的實(shí)踐是，一個(gè)能滿足中等（萬(wàn)行級(jí)）Vue 項(xiàng)目規(guī)模需求的 Webpack 模板只需要一個(gè) config.js 就能放下，甚至不需區(qū)分 webpack.dev.js 和 webpack.prod.js 這些冗余的模塊。

作為參考，這是上文中百行級(jí)的 Vue 中等規(guī)模項(xiàng)目模板，百行內(nèi)的配置即實(shí)現(xiàn)了支持 HMR、預(yù)處理器、依賴提取、內(nèi)聯(lián)圖片、CSS 提取、HTML 生成、反向代理等常見的前端工程化功能：https://github.com/doodlewind...

這是 Gulp + Webpack 項(xiàng)目中的 Gulpfile 模板：https://github.com/doodlewind...