"scripts":
這兩條指令的意思:
npm run dev 執行的檔案build/dev-server.js檔案,執行了:
檢查node和npm版本
引入相關外掛程式和配置
建立express伺服器和webpack編譯器
配置開發中介軟體(webpack-dev-middleware)和熱過載中介軟體(webpack-hot-middleware)
掛載**服務和中介軟體
配置靜態資源
啟動伺服器監聽特定視窗(8080)
說明:express伺服器是提供靜態檔案服務,不過它還使用了http-proxy-middleware。
乙個http請求**的中介軟體,前端開發過程中需要使用到後台的api的話,
可以通過配置proxytable來將相應的後台請求**到專用的api伺服器。
配置webpack編譯入口
配置webpack輸出路徑和明明規則
配置模組resolve規則
配置不同型別模組的處理規則
這個配置裡面只配置了.js 、.vue、、字型等幾類檔案的處理規則額,如果需要處理器她檔案可以在 module.rules裡面配置。
dev-server依賴的webpack配置是webpack.dev.conf.js檔案,測試環境下使用的是webpack.base.conf.js,webpack.dev.conf.js中又引用了webpack.base.conf.js,webpack.base.conf.js主要完成了下面這些事情:
配置webpack編譯入口
配置webpack輸出路徑和明明規則
配置模組resolve規則
配置不同型別模組的處理規則
這個配置裡面只配置了.js 、.vue、、字型等幾類檔案的處理規則額,如果需要處理器她檔案可以在 module.rules裡面配置。
build/webpack.dev.conf.js
在webpack.base.conf.js的基礎上增加完善了開發環境下面的配置,主要包括下面幾件事情:
webpack配置檔案中使用到了utils.js和vue-loader這兩個檔案,utils主要完成下面三件事:
配置靜態資源路徑
生成cssloaders用於載入.vue檔案中的樣式
生成styleloaders用於載入不在.vue檔案中的單獨存在的樣式檔案
vue-loader.conf則只配置了css載入器以及編譯css之後自動新增字首。
構建環境下的配置,build.js主要完成下面幾件事:
loading動畫
刪除建立目標資料夾
webpack編譯
輸出資訊
構建的時候用到的webpack配置來自webpack.prod.conf.js,該配置同樣是在webpack.base.conf基礎上的進一步完善。
主要完成下面幾件事情:
- 合併基礎的webpack配置
- 使用styleloaders
- 配置webpack的輸出
- 配置webpack外掛程式
- gzip模式下的webpack外掛程式配置
- webpack-bundle分析
說明: webpack外掛程式裡面多了醜化壓縮**以及抽離css檔案等外掛程式。
config資料夾分析
config/index.js
config資料夾下最主要的檔案就是index.js了,在這裡面描述了開發和構建兩種環境下的配置,前面的build資料夾下也有不少檔案引用了index.js裡面的配置。
config/dev.env.js、config/prod.env.js和config/test.env.js
這三個檔案就簡單設定了環境變數而已,沒什麼特別的。這是webpack的基本入門,webpack還有很多外掛程式,還需要去探索。後面寫這幾個檔案的原始碼解釋。
解決vue打包後是空白頁面
有的小夥伴可能在剛完成乙個vue專案的時候,要打包上線了,在打包完成後開啟專案檢視一下發現頁面是一片空白,後來開啟控制台看,發現會有這樣的報錯出現。這是怎麼回事呢?因為在你打包專案的時候打包的路徑出現了問題,你打包的是專案給你預設的絕對路徑,我們只要把配置裡的絕對路徑改為相對路徑就可以顯示出頁面後來...
React 打包後部署到伺服器子頁面空白問題
執行npm run build 將react打包後部署到伺服器子路徑 例如 更目錄為root 子路徑為system root system 發現部署到伺服器之後,f12開發者模式發現資源檔案引用錯誤 步驟 1 在專案package.json 新增 homepage 或者在node modules r...
WSS安裝後的頁面空白解決
此時,開啟wamp64 www wss config tankdb config.php檔案 本人安裝的是64位wampserver 將第二行的error reporting 0 注釋掉,儲存後,重新開啟 localhost wss index.php,此時,介面上出現了幾行錯誤 解決方法 查詢ph...