[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