vue+webpack熱替換

標籤：目錄   建議   資源   webpack   bpa   sse   測試環境   oca   assets   

項目地址:http://pan.baidu.com/s/1i5KCXBf

今天上午和同事完成了在mac上面調試了我的架構,最後發現問題出在window系統和mac系統在表示路徑的時候出現問題,在解決這個問題後,在同事的建議下,對項目的目錄做了一個最佳化,把所有的資源檔放在assets目錄,打包後去掉了一層pro目錄這樣看上去清爽了很多,下午開始了最坑爹的熱替換。

熱替換其實很早就開始研究了,但是一直沒有頭緒,今天是要必須解決了,具體解決方式:

1:我決定單獨把熱替換的配置代碼寫在一個檔案裡,然後在package裡面配置一下就可以直接運行這個檔案了:"test": "node dev-server",這樣我npm test 實際上啟動並執行是dev-server檔案，我dev-server檔案裡面主要是寫了熱替換的代碼

2：dev-server檔案這裡面用WebpackDevServer來定義訪問地址和監聽連接埠,然後我就npm start運行啊,想要看到理想中的效果啊,但是現實是殘酷的,並美譽熱替換

3:繼續找啊,終於讓我找到了,一片文章說可以在html手動引入<script type="text/javascript" src="http://localhost:8099/webpack.config.js"></script>來讓wbepack使用websoket監聽代碼的變化,於是我就加上去啊,還是不行 有一個警告,上面說我的vue-loader只適合vue1.0,我諮詢了我的同事,我同事說他也遇到這種問題，說vue-loader 9.0一下只支援vue1.0，9.0以上支援vue2.0,我高興啊 立刻更新了vue-loader到最新的11.0.0，然而奇蹟並沒有發生。

4：又來一個錯，說我的vue的版本和vue-temeplete-compiler版本不一致(欲哭無淚)，繼續尋找解決方案,又有一片文章說也遇到這種問題,他的解決方案是強制使vue和vue-temeplte-compiler的版本一致,於是我就強制指定啊 指定為2.0.9,終於解決了，不報錯了

5：我歡天喜地的準備開始熱替換,fuck!!!!編譯又通不過了，壓縮出現問題。。。。。，我諮詢了我的同事，幸好她也遇到這種問題，他發給我一個檔案.babelrc放在根目錄，我放進去後繼續打包,我擦 竟然通過了，666

6：終於可以熱替換了，但是好像我的webpack.config.js是手動寫在html裡面的,那項目大了幾十個頁面難不成我要一個個寫嗎,這肯定不行啊，繼續尋找解決方案,已經快吐血了，找到一篇文章，作者說可以通過寫一個webpack外掛程式,在外掛程式裡面監聽HtmlWebpackPlugin事件,在他寫入js檔案的時候，我把我手動寫的一條js引用路徑加上去（原諒我說的不清楚,因為我也不是很懂。。。。。http://www.cnblogs.com/haogj/p/5649670.html）照著作者的思路寫一遍（我寫的第一個webpack外掛程式-hotUpdate）,可以啦，我都有點崇拜我自己了。。。。

7：到現在熱替換終於可以了,但是我們一般測試的時候不需要壓縮,生產環境不需要引入那個熱替換的js，所以肯定要分生產環境和測試環境啊,我有一個思路，就是package裡面的scripts裡面可以預設一些指令碼命令,於是我在裡面寫了一個test這個主要是執行我的測試環境,寫了一個start裡面主要是執行我的生產環境,然後測試環境和上產環境的設定檔分兩個。。。。。。

8:到此差不多可以了,解決了心頭大患,但是還是有瑕疵的 第一個就是運行測試環境前 前提是運行一次生產環境。。。。第二個就是我引入的base.css目前還不能添加版本號碼。。。。

vue+webpack熱替換