fix: support webpack 2.x

close #1

History.md

@@ -1,3 +1,7 @@
+### 1.0.2 / 2017-04-05
+
+- css file change md5 hash , support webpack 2.0, fix issue [#1](https://github.com/shepherdwind/css-hot-loader/issues/1)
+
 ### 1.0.1 / 2017-01-26
 
 - First version, work fine

README.md

@@ -47,6 +47,24 @@ Then config webpack.config.js
 
 `css-hot-loader` should be the first loader before `extract-text-webpack-plugin`.
 
+### webpack 2.x
+
+Config file example should like this
+
+```
+module: {
+  rules: [
+    {
+      test: /\.css$/,
+      use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: 'css-loader'
+      })),
+    },
+  ]
+}
+```
+
 ### How
 
 
@@ -63,4 +81,4 @@ So when a css file changed, We just need find which css file link element, and r
 
 ### License
 
-(The MIT License)
+(The MIT License)

hotModuleReplacement.js

@@ -21,6 +21,13 @@ function getLinkElement() {
   return element;
 }
 
+function reloadAll() {
+  document.querySelectorAll('link').forEach(el => {
+    const src = el.href.split('?')[0];
+    el.href = src + '?' + Date.now();
+  });
+}
+
 module.exports = function() {
   if (typeof document === 'undefined') {
     return;
@@ -31,5 +38,7 @@ module.exports = function() {
   if (el) {
     el.href = src + '?' + Date.now();
     console.log('[HMR] css reload %s', src);
+  } else {
+    reloadAll();
   }
 };

loader.js

@@ -2,7 +2,7 @@ module.exports = function(content) {
   this.cacheable();
   return content + `
     if(module.hot) {
-      const cssReload = require('${require.resolve('./hotModuleReplacement')}');
+      const cssReload = require('${require.resolve('./hotModuleReplacement')}?${Date.now()}');
       module.hot.dispose(cssReload);
       module.hot.accept(undefined, cssReload);
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-hot-loader",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "css hot reload work with extract-text-webpack-plugin",
   "main": "index.js",
   "scripts": {