🔧 webpack-hot-middleware 설정 및 스크립트 수정

package.json

@@ -5,8 +5,9 @@
   "scripts": {
     "build": "webpack",
     "watch": "webpack --watch",
+    "dev": "NODE_ENV=development node ./src/server/bin/www",
     "client:dev": "webpack serve --open",
-    "server:dev": "NODE_ENV=development nodemon ./src/server/bin/www"
+    "server:dev": "nodemon ./src/server/bin/www"
   },
   "repository": {
     "type": "git",

src/server/app.js

@@ -0,0 +1,32 @@
+const express = require('express');
+const webpack = require('webpack');
+const webpackConfig = require('../../webpack.config');
+const compiler = webpack(webpackConfig);
+
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+
+const app = express();
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+if (process.env.NODE_ENV === 'development') {
+  app.use(
+    webpackDevMiddleware(compiler, {
+      publicPath: webpackConfig.output.publicPath,
+    }),
+  );
+
+  app.use(
+    webpackHotMiddleware(compiler, {
+      log: console.log,
+      path: '/__webpack_hmr',
+      heartbeat: 10 * 1000,
+    }),
+  );
+}
+
+app.get('/', function (req, res) {
+  res.sendFile(__dirname + './dist/index.html');
+});
+module.exports = app;

src/server/bin/www

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+const app = require('../app');
+var debug = require('debug')('achievement:server');
+var http = require('http');
+require('dotenv').config();
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

webpack.config.js

@@ -4,14 +4,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   mode: 'development',
-  devServer: {
-    contentBase: path.join(__dirname, 'dist'),
-    port: 3000,
-    host: `localhost`,
-  },
   devtool: 'eval-source-map',
   entry: {
-    main: ['webpack-hot-middleware/client?reload=true&timeout=1000', './src/client/App.js'],
+    main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/client/App.js'],
   },
   output: {
     path: path.resolve('./dist'),