ABAP system landscape和vue項目webpack構建方法是什么

本篇內容介紹了“ABAP system landscape和vue項目webpack構建方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

基于Netweaver的ABAP transport route一般都有dev，test和prod三種類型的系統。

而Vue前端項目的webpack build設置也類似。

以 SAP成都研究院數字創新空間開發的智能服務 前端實現為例, 在package.json里定義了名為dev和build兩個script：

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"

}

一旦運行npm run dev，會觀察到在dev環境下使用了webpack-dev-server這個依賴啟動了web服務器

當然webpack-dev-server這個依賴也必須定義在package.json的dependencies區域里：

npm install把所有依賴下載到本地后，也能觀察到webpack-dev-server.js這個依賴的實現：

執行命令行npm run dev, 實際上執行的命令行為：

node "C:Usersi042416Documents?_DISCodeSmartServiceFront ode_modules.bin..webpack-dev-serverinwebpack-dev-server.js" --inline --progress --config build/webpack.dev.conf.js

我們在前端項目build文件夾里能看到三個和webpack相關的配置文件：

• webpack.base.conf.js

• webpack.dev.conf.js

• webpack.prod.conf.js

這里也能看到dev和prod環境，類似ABAP的開發和生產系統。區別是vue webpack的dev環境包含的是未壓縮過的代碼，方便調試，而prod環境的代碼是壓縮過后的。而ABAP無論是開發，測試還是生產，代碼都相同。

之所以要引入webpack.base.conf.js, 也是類似面向對象的編程思想，把dev和prod環境一些通用的webpack配置抽取出來，避免在dev和prod里重復定義。

最終dev和prod的webpack配置內容，是webpack.base.conf里的通用內容，加上各自專屬文件里定義的配置內容的并集, 參考第14行的merge方法，由webpack-merge模塊提供。

“ABAP system landscape和vue項目webpack構建方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！