webpack打包（有面試題）

1.打包入口

entry:{
    「chunkKey」: 「」  //使用key擴展性好，清楚的知道入口文件對應的key 
}

2.css文件處理

• 引入css

• css-loader

在較新的版本中使用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的一個功能，他能夠使得代碼修改事後不用刷新瀏覽器就能夠更新，是高級版的自動刷新瀏覽器（將代碼從新執行而不總體刷新瀏覽器）

• 優化問題

---

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期好文推薦：

  • 1.時間戳轉換成時間日期格式及去重
  • 2.前端面試之JavaScript（總結）