diff --git a/components/App.js b/components/App.js
index e205f43..a41ff05 100644
--- a/components/App.js
+++ b/components/App.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react'
class App extends Component {
render() {
- return
This is definitely a React app now!
+ return This is definitely a hot (module reloading) React app now!
}
}
diff --git a/package.json b/package.json
index 034be19..440283d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"description": "A simple todo list app built with React, Redux and Webpack",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "serve": "nodemon server/server.js"
+ "serve": "nodemon server/server.js --ignore components"
},
"repository": {
"type": "git",
@@ -17,9 +17,12 @@
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
+ "babel-preset-react-hmre": "^1.1.1",
"express": "^4.13.4",
"react": "^0.14.7",
"react-dom": "^0.14.7",
- "webpack": "^1.12.13"
+ "webpack": "^1.12.13",
+ "webpack-dev-middleware": "^1.10.1",
+ "webpack-hot-middleware": "^2.17.0"
}
}
diff --git a/server/server.js b/server/server.js
index 51a4946..54c5b11 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1,8 +1,21 @@
var express = require('express');
var path = require('path');
+var config = require('../webpack.config.js');
+var webpack = require('webpack');
+var webpackDevMiddleware = require('webpack-dev-middleware');
+var webpackHotMiddleware = require('webpack-hot-middleware');
var app = express();
+var compiler = webpack(config);
+
+app.use(webpackDevMiddleware(compiler, {
+ noInfo: true,
+ publicPath: config.output.publicPath
+}));
+
+app.use(webpackHotMiddleware(compiler));
+
app.use(express.static('./dist'));
app.use('/', function (req, res) {
diff --git a/webpack.config.js b/webpack.config.js
index 5b16fdd..08823b2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,11 +1,21 @@
+var webpack = require('webpack');
+
module.exports = {
devtool: 'inline-source-map',
- entry: ['./client/client.js'],
+ entry: [
+ 'webpack-hot-middleware/client',
+ './client/client.js'
+ ],
output: {
- path: './dist',
+ path: require("path").resolve("./dist"),
filename: 'bundle.js',
publicPath: '/'
},
+ plugins: [
+ new webpack.optimize.OccurrenceOrderPlugin(),
+ new webpack.HotModuleReplacementPlugin(),
+ new webpack.NoErrorsPlugin()
+ ],
module: {
loaders: [
{
@@ -13,7 +23,7 @@ module.exports = {
loader: 'babel-loader',
exclude: /node_modules/,
query: {
- presets: ['react', 'es2015']
+ presets: ['react', 'es2015', 'react-hmre']
}
}
]