Working HOT RELOAD !!

js/webpack/config.js

@@ -51,9 +51,9 @@ module.exports = {
         exclude: /node_modules/,
         // use: [ 'happypack/loader?id=js' ]
         use: isProd ? ['babel-loader'] : [
-          // 'react-hot-loader',
           'babel-loader?cacheDirectory=true'
-        ]
+        ],
+        options: Shared.getBabelrc()
       },
       {
         test: /\.js$/,

js/webpack/dev.server.js

@@ -25,7 +25,6 @@ const ProgressBar = require('progress');
 const webpackConfig = require('./config');
 const Shared = require('./shared');
 
-const hotMiddlewareScript = 'webpack-hot-middleware/client';
 let progressBar = { update: () => {} };
 
 /**
@@ -36,11 +35,18 @@ let progressBar = { update: () => {} };
   Object.keys(webpackConfig.entry).forEach((key) => {
     const entry = webpackConfig.entry[key];
 
-    webpackConfig.entry[key] = [].concat(entry, hotMiddlewareScript);
+    webpackConfig.entry[key] = [].concat(
+      'react-hot-loader/patch',
+      'webpack-hot-middleware/client',
+      'webpack/hot/only-dev-server',
+      entry
+    );
   });
 
   webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
+  webpackConfig.plugins.push(new webpack.NamedModulesPlugin());
   webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
+
   webpackConfig.plugins.push(new webpack.ProgressPlugin(
     (percentage) => progressBar.update(percentage)
   ));
@@ -49,6 +55,10 @@ let progressBar = { update: () => {} };
 const app = express();
 const compiler = webpack(webpackConfig);
 
+app.use(webpackHotMiddleware(compiler, {
+  log: console.log
+}));
+
 app.use(webpackDevMiddleware(compiler, {
   noInfo: false,
   quiet: false,
@@ -59,10 +69,6 @@ app.use(webpackDevMiddleware(compiler, {
   }
 }));
 
-app.use(webpackHotMiddleware(compiler, {
-  log: console.log
-}));
-
 app.use(express.static(webpackConfig.output.path));
 
 // Add the dev proxies in the express App

js/webpack/shared.js

@@ -16,6 +16,7 @@
 
 const webpack = require('webpack');
 const path = require('path');
+const fs = require('fs');
 // const HappyPack = require('happypack');
 
 const postcssImport = require('postcss-import');
@@ -27,9 +28,13 @@ const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 
 function getBabelrc () {
-  const babelrc = require('../.babelrc');
+  const babelrc = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../.babelrc')));
+
   const es2015Index = babelrc.presets.findIndex((p) => p === 'es2015');
-  babelrc.preset[es2015Index] = [ 'es2015', { modules: false } ];
+
+  // [ "es2015", { "modules": false } ]
+  babelrc.presets[es2015Index] = [ 'es2015', { modules: false } ];
+  babelrc['babelrc'] = false;
   return babelrc;
 }
 
@@ -50,6 +55,8 @@ function getPlugins (_isProd = isProd) {
   ];
 
   const plugins = [
+    // NB: HappyPack is not yet working with Webpack 2... (as of Nov. 26)
+
     // new HappyPack({
     //   id: 'css',
     //   threads: 4,
@@ -90,7 +97,8 @@ function getPlugins (_isProd = isProd) {
       debug: !isProd,
       options: {
         context: path.join(__dirname, '../src'),
-        postcss: postcss
+        postcss: postcss,
+        babel: getBabelrc()
       }
     }),