在使用extract-text-webpack-plugin插件編譯sass文件生成一個單獨的css文件通過link導入到html中，經查詢此方法的優點在於避免直接將css打包入bundle.js中，造成樣式混亂。

1bug：在安裝了style-loader，css-loader，sass-loader之後，配置文件如下：

報錯：

開始我以為是 沒有安裝node-css，於是安裝了node-css。註意：使用npm安裝時報了錯，主要是跟register有關，具體報錯沒截圖，查過之後發現原因可能是npm服務器在國外，所以換成了淘寶鏡像安裝。

上圖報錯中我一直認為是sass-loader沒有編譯成功，但報錯底下信息顯示：

這裏可以很明顯的看到它使用style-loader去解析.scss文件，所以報錯，所以問題出在上圖配置文件中，既然已經生成了單獨的css文件並且在頭部導入，那就不應該用style-loader解析文件，所以去掉配置文件中style-loader就可以打包成功了！

tips：

1.配置文件中module裏面的loaders都是為entry中文件配置的，因此相關文件應該在entry中require或者import；

2.在使用插件為模塊生成單獨文件時，plugins中的根路徑即為output中的路徑，寫相對路徑也是根據output中的路徑而來；

extract-text-webpack-plugin（you may need an appropriate loader to handle this file type）