javascript - gulp+webpack+vue想做個(gè)全家桶,各位有什么介紹的或者文章實(shí)例代碼
問題描述
vue官網(wǎng)有vue-cli腳手架自帶的webpack打包,但是我想讓gulp編譯,webpack打包,vue是框架,做個(gè)全家桶腳手架項(xiàng)目,不知如何著手,請(qǐng)求高手指教!
問題解答
回答1:首先,為何要使用 Gulp 編譯呢?在剛開始了解 Webpack 時(shí),答主也實(shí)現(xiàn)過 Gulp + Webpack 的工作流,它能夠工作,也可以維護(hù),但實(shí)際上它帶來的是不必要的復(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è)能滿足中等(萬行級(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...
