Dev server middleware configured in line with best practice

package.json

@@ -41,6 +41,7 @@
     "body-parser": "^1.17.2",
     "bootstrap": "^3.3.7",
     "bottleneck": "^1.15.1",
+    "connect-history-api-fallback": "^1.3.0",
     "connect-redis": "^3.3.0",
     "cookie-parser": "^1.4.3",
     "csv": "^1.1.0",
@@ -70,6 +71,7 @@
     "react-copy-to-clipboard": "^5.0.0",
     "react-dom": "^15.6.0",
     "react-highcharts": "^11.0.0",
+    "react-hot-loader": "^3.0.0-beta.7",
     "react-notification": "^6.7.0",
     "react-quill": "^1.0.0-rc.2",
     "react-redux": "^5.0.5",

server/config/server/webpack-dev-middleware.js

@@ -1,4 +1,10 @@
 const webpack = require('webpack');
+const history = require('connect-history-api-fallback');
+
+/*
+  With thanks to https://github.com/coryhouse/react-slingshot
+  This app was kickstarted with this generator.
+*/
 
 module.exports = app => {
   if (process.env.NODE_ENV === 'development') {
@@ -8,7 +14,21 @@ module.exports = app => {
     const devWebpackConfig = require('../../../webpack.config.dev');
     const compiler = webpack(devWebpackConfig);
 
-    app.use(webpackDevMiddleware(compiler, { publicPath: devWebpackConfig.output.publicPath }));
+    app.use(history());
+    app.use(webpackDevMiddleware(compiler, {
+      publicPath: devWebpackConfig.output.publicPath,
+      noInfo: false,
+      quiet: false,
+      stats: {
+        assets: false,
+        colors: true,
+        version: false,
+        hash: false,
+        timings: false,
+        chunks: false,
+        chunkModules: false
+      },
+    }));
     app.use(webpackHotMiddleware(compiler));
   }
 };

webpack.config.dev.js

@@ -4,13 +4,19 @@ const path = require('path');
 
 module.exports = {
   resolve: {
-    extensions: ['.js', '.jsx', '.css']
+    extensions: ['*', '.js', '.jsx', '.json']
   },
-  context: path.resolve(process.cwd(), 'client'),
-  devtool: 'eval',
-  entry: { app: ['./index', 'webpack-hot-middleware/client?reload=true'] },
+  devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
+  entry: [
+    // must be first entry to properly set public path
+    './client/webpack-public-path',
+    'react-hot-loader/patch',
+    'webpack-hot-middleware/client?reload=true',
+    path.resolve(__dirname, 'client/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
+  ],
+  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
   output: {
-    path: `${__dirname}/client`, // Note: Physical files are only output by the production build task `npm run build`.
+    path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
     publicPath: '/',
     filename: 'bundle.js'
   },
@@ -22,32 +28,40 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
-      template: 'index.ejs',
+      template: 'client/index.ejs',
       minify: {
         removeComments: true,
         collapseWhitespace: true
       },
       inject: true
     }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: false,
+      debug: true,
+      noInfo: true, // set to false to see a list of every file being bundled.
+      options: {
+        sassLoader: {
+          includePaths: [path.resolve(__dirname, 'client', 'scss')]
+        },
+        context: '/',
+      }
+    }),
     new webpack.ProvidePlugin({
       jQuery: 'jquery',
       $: 'jquery',
       jquery: 'jquery'
     })
   ],
   module: {
-    loaders: [
+    rules: [
       {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']},
       {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'},
-      {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf)$/, loader: 'url-loader', options: { name: '[hash].[ext]', limit: 10000 }},
-      {test: /\.ico$/, loader: 'file-loader', options: { name: '[hash].[ext]' }},
-      {test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css-loader',  'sass-loader']},
-      {
-        test: /\.json$/,
-        include: /node_modules/,
-        loader: 'json-loader'
-      }
+      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
+      {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
+      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'},
+      {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'},
+      {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
+      {test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']}
     ]
-  },
-
+  }
 };