1.打包入口
entry: {
chunkkey:'' // 使用chunkkey擴展性好，清楚的知道入口文件對應的key
}
2.處理CSS
引入css
css-loader
提取css文件
extract-text-webpack-plugin
3.本地開發服務器：webpack-dev-server
路徑重定向，支持https，瀏覽器中可以顯示編譯錯誤，可以進行接口代理，模塊熱更新
proxy代理遠程接口請求
http-proxy-middleware參數：
option：
target：指定代理的地址
changeOrigin：改變源到url，在虛擬主機上很有用
headers：增加http請求頭
logLevel：幫助調試
pathRewrite：重定向
熱更新優勢：
保持應用的數據狀態，節省調試時間，樣式調試更快
webpack.HotModuleReplacementPlugin:通過module.hot來操作
module.hot.accept當依賴更新後執行的回調
webpack.NameModulesPlugin清晰相對路徑輸出
代碼調試：source Map調試
設置DevTool的值：
4.優化打包速度
*分開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
5.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打包的各個流程（plugin的生命週期）
*webpack-dev-server和http服務器如nginx有什麼不同：
webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，並且可以使用模塊熱更新，他比傳統的http服務器對開發更加簡單高效
*什麼是模塊熱更新：
模塊熱更新是webpack的一個功能，他可以使得代碼修改後不用刷新瀏覽器就可以更新內容，是高級版的自動刷新瀏覽器（將代碼重新執行一遍而不是整體刷新瀏覽器）
優化問題：
優化問題：
