github倉庫
最近專案打包升級，將老的gulp換成webpack,然後很輕鬆的，增加多入口，增加rules,增加plugins好像萬事大吉了。詳細介紹如何一步一步自建一個多頁面的webpack,然後，由於我們是老專案，按這樣打包沒什麼一丁點問題，然後，再開發環境，新建專案，寫專案，然後發現hmr熱更新發現 ，竟然要10多秒，天吶，而且發現在js裡寫的class竟然沒打包過去。
下面就來談談我是怎麼解決這些坑的。
1.打包後js裡操作的class樣式，竟然沒打包到css,原因是我用了purifycss-webpack（消除冗餘的css程式碼），但是沒有忽略了掃描js原始碼。這個外掛確實好用哦，推薦❤️❤️❤️
2.為什麼打包後，和開發環境不一樣，因為開發環境沒配置抽離css，所以就不會走純淨css這些外掛（為了開發環境打包速度），所以需要再加個打包後的代理伺服器，可以隨時檢視效果，改bug啊，所以又新加了script/pro.js指令碼
3.最重要的，開發環境熱更新要10多秒，其實多入口，webpack還是要重新打包所有入口的檔案，即使你那個頁面沒變動，造成時間久的原因是我們devtool:用了source-map，比較耗時間，再改過配置devtool: '#cheap-module-eval-source-map'，時間快了些，8秒左右吧，然後看了html-webpack-plugin配置hash: true,好像也快了些，但是不明顯。但是不是治根，現在頁面才30個不到，然後再考慮要不要再抽離一個但頁面入口的webpack配置，即開發的當前頁面，但想著還要複製黏貼，寫不同但指令碼，想想麻煩（懶啊），這時候有再webpack官網看了下，竟然支援動態入口配置，so so 找到了一種比較靠譜的優化方式。文件，
簡單的說就返回個promise物件。想著開發環境處理與生產有很多不同，so把開發和生產webpack分離，畢竟生產不需要動態。具體程式碼
entry: () => new Promise((resolve) => resolve(webpackConf.webpackEntrys())),複製程式碼webpackEntrys函式
getAppEntry函式
entrys和commonEntry
此處遇到一個坑，剛開始是傳給是陣列，結果整合成1個main.js不符合需求，後面改寫物件傳入。
注：
entry為空，則為打包所有頁面，為單獨string可以設定具體單獨打包的頁面，其實也可以傳想要打包的陣列
這個是開發者個人的配置，git設定忽略
config/self.config.js
module.exports = { entry: "test", env: "", cookie: "", devBaseUrl: ""}複製程式碼