get hot loading working again

client/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { hot } from 'react-hot-loader';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import configureStore from './store';
@@ -11,9 +12,15 @@ const history = browserHistory;
 const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
 
-render(
+const App = () => (
   <Provider store={store}>
     <Router history={history} routes={routes(store)} />
-  </Provider>,
+  </Provider>
+);
+
+const HotApp = hot(module)(App);
+
+render(
+  <HotApp />,
   document.getElementById('root')
 );

package.json

@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-react-constant-elements": "^6.8.0",
     "babel-plugin-transform-react-inline-elements": "^6.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.2.6",
@@ -49,6 +49,7 @@
     "postcss-reporter": "^1.3.3",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.13.1",
+    "webpack-externals-plugin": "^1.0.0",
     "webpack-manifest-plugin": "^1.1.0"
   },
   "engines": {
@@ -105,6 +106,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.1.3",
+    "react-hot-loader": "^4.1.2",
     "react-inlinesvg": "^0.7.5",
     "react-redux": "^5.0.6",
     "react-router": "^3.2.0",
@@ -124,7 +126,7 @@
     "slugify": "^1.2.9",
     "srcdoc-polyfill": "^0.2.0",
     "url": "^0.11.0",
-    "webpack": "^2.6.1",
+    "webpack": "^3.1.0",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0",
     "xhr": "^2.2.1"

webpack.config.babel.js

@@ -0,0 +1,43 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const cssnext = require('postcss-cssnext');
+const postcssFocus = require('postcss-focus');
+const postcssReporter = require('postcss-reporter');
+
+module.exports = {
+  output: {
+    publicPath: '/',
+    libraryTarget: 'commonjs2',
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    modules: [
+      'client',
+      'node_modules',
+    ],
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        loader: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: 'css-loader!sass-loader!postcss-loader'
+        })
+      },
+      {
+        test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
+        loader: 'url-loader?limit=10000',
+      },
+    ],
+  },
+  postcss: () => [
+    postcssFocus(),
+    cssnext({
+      browsers: ['last 2 versions', 'IE > 10'],
+    }),
+    postcssReporter({
+      clearMessages: true,
+    }),
+  ],
+};

webpack.config.dev.js

@@ -4,8 +4,9 @@ require('dotenv').config();
 module.exports = {
   devtool: 'cheap-module-eval-source-map',
   entry: {
-    app: ['babel-polyfill',
+    app: [
       'webpack-hot-middleware/client',
+      'react-hot-loader/patch',
       './client/index.jsx',
     ],
     vendor: [
@@ -47,11 +48,19 @@ module.exports = {
     })
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
         exclude: [/node_modules/, /.+\.config.js/],
-        loaders: ['babel-loader', 'eslint-loader']
+        use: [{
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            plugins: ['react-hot-loader/babel'],
+          } 
+        }, {
+          loader: 'eslint-loader'
+        }]
       },
       {
         test: /\.scss$/,

webpack.config.server.js

@@ -0,0 +1,62 @@
+const fs = require('fs');
+const path = require('path');
+const ExternalsPlugin = require('webpack-externals-plugin');
+
+module.exports = {
+
+  entry: path.resolve(__dirname, 'server/server.js'),
+
+  output: {
+    path: __dirname + '/static/dist/',
+    filename: 'server.bundle.js',
+  },
+
+  target: 'node',
+
+  node: {
+    __filename: true,
+    __dirname: true,
+  },
+
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    modules: [
+      'client',
+      'node_modules',
+    ],
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          presets: [
+            'react',
+            'es2015',
+            'stage-0',
+          ],
+          plugins: [
+            [
+              'babel-plugin-webpack-loaders', {
+                'config': './webpack.config.babel.js',
+                "verbose": false
+              }
+            ]
+          ]
+        },
+      }, {
+        test: /\.json$/,
+        loader: 'json-loader',
+      },
+    ],
+  },
+  plugins: [
+    new ExternalsPlugin({
+      type: 'commonjs',
+      include: path.join(__dirname, './node_modules/'),
+    }),
+  ],
+};