webpack Compile： 將js編譯成Bundle
HMR Server: 將熱更新的文件輸出給 HMR Runtime
Bundle Server： 提供文件在瀏覽器訪問
HMR Runtime：會被注入到瀏覽器，更新文件變化
bundle.js : 構建輸出的文件
資源內聯
代碼層面：
頁面框架的初始化腳本
上報相關打點
css內聯避免頁面閃動
請求層面：
減少http網絡請求數 （小圖片或者字體內聯（url-loader））
html和 js內聯
`
raw-loader 內聯html
raw-loader 內聯js
`
多頁面打包通用方案
1.動態獲取 entry 和設置 html-webpack-plugin數量
2.利用 glob.sync
entry: glob.sync(path.join(__dirname,'./src/*/index.js'))
使用source map
1.五個關鍵字
eval: 使用eval包裹代碼塊
source map: 產生.map文件
cheap : 不包含列信息
inline 將.map作為DataURI嵌入，不單獨生成 .map文件
module : 包含loader的sourcemap
webpack ssr打包存在的問題
1.瀏覽器的全局變量（nodejs中沒有 document window）
組件適配: 將不兼容的組件根據打包環境進行適配。
請求適配： 將fetch或者 ajax發送請求的寫法改成 isomorphic-fetch或者 axios。
2.樣式問題（nodejs無法解析css）
方案一： 服務端打包通過ignore-loader忽略掉css的解析
方案二： 將style-loader 替換成 isomorphic-style-loader。
優化構建時命令行的顯示日志
|preset|alternative|description|
|"errors-only"|none|只在發生錯誤時輸出|
|"minimal"|none|只在發生錯誤或有新的編譯時輸出|
|"none"|false|沒有輸出|
|"normal"|true|標准輸出|
|"verbose"|none|全部輸出|
如何優化？
1.插件 friendly-errors-webpack-plugin：
success: 構建成功的日志提示
warning：構建警告的日志提示
error ： 構建報錯的日志提示
2.stats設置成 errors-only
如何判斷構建是否成功？
在CI/CD的 pipline 或者發布系統需要知道當前的構建狀態。
每次構建完成后輸入 echo $? 獲取錯誤碼
webpack4 之前的版本構建失敗不會拋出錯誤碼
nodejs中的 process.exit規范：
0表示成功完成，回調函數中err為null。
非0表示執行失敗，回調函數中，err不為null， err.code就是傳給exit的數字。
如何主動捕獲並處理構建錯誤？
compiler 在每次構建結束后會觸發done這個hook
process.exit主動處理構建報錯