[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

转载于:https://my.oschina.net/u/2401395/blog/831025