[Webpack2] extract-text-webpack-plugin 的坑，頁面樣式 熱更新失敗的緣由

使用 extract-text-webpack-plugin 打包出樣式文件，可是在開發階段，熱更新的時候，樣式改變後，能成功的從新處理抽離出新的樣式文件(此時文件存在於內存中)，並把改變後要更新的內容記錄到 hot-update.js 中，以便瀏覽器更新要改變的內容，但extract-text-webpack-plugin 又把該部份內容 刪除 了！！！所以 瀏覽器監控並接收到更新的通知，但因爲執行 hot-update.js 中更新內容爲空的更新方法，發現並無要改變的東西。這就是瀏覽器最終進行了 刷新, 但樣式沒起效果的緣由。

hot-update.js的內容：

本人使用的是 Webpack2 + webpack-dev-server + react-hot-loader + CSS Module + Autoprefixer。

webpackHotUpdate(0,{

/***/ "./components/App.css":
/***/ (function(module, exports) {

eval("// removed by extract-text-webpack-plugin\nmodule.exports = {\"app\":\"App__app-26iGG\",\"h2\":\"App__h2-o5GaB\",\"webpack\":\"App__webpack-1iiUZ\"};//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW...joiIn0=");

/***/ })

})

官方issues

Unable to HMR (Hot Module Replacement) css/scss with Webpack 2.2.0 and webpack-dev-server 2.2.1