webpack打包
1.打包入口
entry:{
「chunkKey」: 「」 //使用key擴展性好，清楚的知道入口文件對應的key
}
2.css文件處理
- 引入css
- css-loader
在較新的版本中使用mini-css-extract-plugin提取css文件在較新的版本中使用mini-css-extract-plugin提取css文件
3.本地開發服務器：webpack-dev-server
- 路徑重定向，支持https，瀏覽器中能夠顯示編譯錯誤，能夠進行接口代理，模塊熱更新
4.Proxy
- 代理遠程接口請求
http-proxy-middleware參數：
option：
target：指定代理的地址，
changeOrigin：改變源到url，在虛擬主機上頗有用
headers：增長http請求頭，
logLevel：幫助調試
pathRewrite：重定向
- 熱更新優點：
保持應用的數據狀態，節省調試時間，樣式調試更快 deServer.hot webpack.HotModuleReplacementPlugin：經過module.hot來操做，module.hot.accept當依賴更新後執行的回調 webpack.NameModulesplugin清晰相對路徑輸出
- 代碼調試：source Map 調試
設置DevTool的值：
5.優化打包速度
- 分開vender和app--使用插件：DllPlugin和DllReferencePlugin
- UglifyJsPlugin只要傳入parallel（平行線程處理）和cache（緩存）參數
- HappyPack，HappyPack.ThreadPool（線程池）
- babel-loader：options.cacheDirectory，include，exclude加入參數提升速度
- 減小resolve，DevTool：去除sourcemap，cache-loader
長緩存優化：從用戶填寫url訪問網頁開始，用戶瀏覽器向服務器下載請求資源，服務器可經過控制http響應頭，能夠告知瀏覽器某些資源是強緩存，不用更新，這些資源不用更新時，瀏覽器會從本地加載資源。
解決方式：提取vender，hash->chunkhash,提取webpack runtime
Webpack探究
- Webpack和grunt和gulp有啥不一樣：
Webpack是一個模塊打包器，grunt和gulp是執行任務的，webpack能夠遞歸的打包項目中的全部模塊（遞歸：指定一個入口，分析模塊的依賴，它會遞歸的查找全部相關的依賴），最終生成幾個打包後的文件，他和其餘的工具的最大的不一樣在於它支持code-splitting（代碼分割），模塊化（AMD，ESM，CommonJS）開發，全局的分析工具（分析整個項目引入的模塊）
- 什麼是bundle，什麼是chunk，什麼是module：
bundle是由webpack打包出來的文件，chunk是指webpack在進行模塊依賴分析的時候，代碼分割出來的代碼塊，module是開發中的單個模塊
- 什麼是loader，什麼是plugin：
loader是用來告訴webpack如何轉化處理某一類型的文件，而且引入到打包出的文件中
plugin是用來自定義webpack打包過程當中的方式，一個插件是含有apply方法的一個對象，經過這個方法能夠參與到整個webpack打包的各個流程（生命週期）
- webpack-dev-server和http服務器如nginx有什麼不一樣：
webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，而且能夠使用模塊熱更新，他比傳統的http服務器對開發更加簡單高效
- 什麼是模塊熱更新：
模塊熱更新是webpack的一個功能，他能夠使得代碼修改事後不用刷新瀏覽器就能夠更新，是高級版的自動刷新瀏覽器（將代碼從新執行而不總體刷新瀏覽器）
- 優化問題