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