過了個年纽门，angular直接就到4版本了薛耻。看了看我還停留在2.1赏陵。而且項(xiàng)目差不多一倆月沒維護(hù)饼齿，剛git pull下來運(yùn)行就看到很多插件的依賴警告，作為有輕度強(qiáng)迫癥的我蝙搔，果斷忍受不了缕溉，所以把 angular升級到了2.4，webpack升級到了2.2吃型。
升級后有些操蛋证鸥，插件導(dǎo)致各種的 start 、build問題接踵而來勤晚。起始其他的還算好枉层，主要都是插件的用法更新了。讓我難受幾天的是 webpack 進(jìn)行 aot build 的問題赐写。
我在項(xiàng)目中用到的是sass鸟蜡，就是css的預(yù)編譯器。在angular的component中我是直接這樣使用的
angular是不能直接識別scss的挺邀，所以需要webpack配置一下loader揉忘，我用到及作用的loader依次為 ： sass-loader跳座，css-loader，to-string-loader
為了處理scss中的 url() 引用的圖像文件泣矛，還得使用 url-loader
大概過程是這樣理解
sass-loader 識別styleUrls中引用到的scss疲眷，編譯為css后傳給css-loader，css-loader 在處理 url() 路徑時會自動更改為 url-loader 設(shè)置的name對應(yīng)的路徑您朽，url-loader 再根據(jù)文件的大小自動處理引用到的圖像文件咪橙，由于css-loader 轉(zhuǎn)完后沒有返回字符串，angular styleUrls識別不了虚倒，所以最后 to-string-loader 將返回一個編譯后的css字符串。
那么問題來了产舞，過年前未升級版本的時候一切都能順利魂奥，scss成功識別并替換了其中 url() 的路徑，并打包了對應(yīng)的圖像文件易猫。過年后回來升級了一下耻煤，scss中的 url() 路徑是可以正確地替換，但是圖片本身并沒有被一起打包到 發(fā)布目錄下准颓。
于是我翻遍了google哈蝇，嘗試換了各種轉(zhuǎn)字符串的loader
都沒什么卵用。最后想想可能是url-loader的問題攘已，所以更新了最新的炮赦，還是不行。換成了 file-loader 還是不行样勃。吠勘。我只能說在gihub看了至少不下幾十個的angular-seed，雖然都有涉及到如何使用sass峡眶，但是都沒有在sass中引用到圖片剧防。我也在 stackoverflow 逛了許久，可惜的是相關(guān)的問題少辫樱，回答更少峭拘。
可能是水平太菜了，一個問題都糾結(jié)著我小幾天狮暑。最后我想了想鸡挠，用了一個比較蠢的方法。
首先在webpack的plugins中配置一個插件直接復(fù)制所有的圖像文件到發(fā)布目錄中
然后在 url-loader 中修改文件路徑使css-loader處理 url() 時替換成相應(yīng)的心例，這樣在build之后就能找到圖像資源了宵凌。。
雖說是沒問題了止后，但是糟點(diǎn)滿滿啊瞎惫。直接復(fù)制圖像資源本來就不符合webpack的模塊打包機(jī)制了溜腐，而且這樣一復(fù)制等于把某個文件夾下的全部圖像都復(fù)制過去，雖說不會增加流量瓜喇，但是以后如果圖片分多個文件夾挺益，那不好管理。期待以后能慢慢解決此問題乘寒。留望众！
17-3-24 更
將項(xiàng)目升級至Angular4，此問題不復(fù)存在伞辛！
