web-hot-middleware

Peng.Li · Peng.Li · commit 7ef0dcc3fdb8 · 2016-08-08T17:06:23.000+08:00
diff --git a/app/app.js b/app/app.js
@@ -1,6 +1,7 @@
 import webpack from 'webpack';
 import webpackConfig from '../webpack.config';
 import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
 import express from 'express';
 
 const app = express();
@@ -15,6 +16,10 @@ app.use(webpackDevMiddleware(compiler, {
   publicPath: webpackConfig.output.publicPath
 }));
 
+app.use(webpackHotMiddleware(compiler, {
+  log: console.log
+}));
+
 app.use(express.static('./public'));
 
 app.get('/hello', function(req, res) {
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "css-loader": "^0.23.1",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
-    "webpack-dev-middleware": "^1.6.1"
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.12.2"
   },
   "dependencies": {
     "babel-preset-es2015": "^6.13.2",
diff --git a/public/entry.js b/public/entry.js
@@ -1 +1,12 @@
-document.write('it works');
+// Notice!!
+// we can't use `document.write(...)` here
+// which is not allow and produce error:
+// It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
+const content = document.getElementById('content')
+content.innerHTML='it works';
+
+// Notice!!!
+// Following is required to make reloading happen
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
 	<title>Es6 Project Demo</title>
 </head>
 <body>
+	<div id='content'></div>
 	<script src="/assets/bundle.js"></script>
 </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,10 @@
+const webpack = require('webpack');
+
 module.exports = {
-  entry: './public/entry.js',
+  entry: [
+    './public/entry.js',
+    'webpack-hot-middleware/client'
+  ],
   output: {
     path: __dirname,
     publicPath: '/assets/',
@@ -14,5 +19,13 @@ module.exports = {
         presets: ['es2015']
       }
     }]
-  }
+  },
+  plugins: [
+    // Webpack 1.0
+    new webpack.optimize.OccurenceOrderPlugin(),
+    // Webpack 2.0 fixed this mispelling
+    // new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ]
 }
