Made hot reloading work and improved webpack stuff

app/webpack/base.config.js

@@ -11,7 +11,8 @@ module.exports = {
     ],
     output: {
         path: path.resolve(rootDir, "public"),
-        filename: "bundle.js"
+        filename: "bundle.js",
+        publicPath: "/",
     },
     resolve: {
         extensions: [".ts", ".tsx", ".js", ".json"],
@@ -36,6 +37,5 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: "./app/index.html"
         }),
-        new webpack.NamedModulesPlugin(),
     ],
 };

app/webpack/dev.config.js

@@ -8,10 +8,11 @@ module.exports = webpackMerge.strategy({
     devtool: "eval-source-map",
     entry: [
         "react-hot-loader/patch",
-        "webpack-dev-server/client?http://localhost:8080",
+        "webpack-hot-middleware/client",
         "webpack/hot/only-dev-server",
     ],
     plugins: [
+        new webpack.NamedModulesPlugin(),
         new webpack.HotModuleReplacementPlugin(),
     ],
     devServer: {

package.json

@@ -38,6 +38,7 @@
     "@types/react-fontawesome": "^1.5.0",
     "@types/react-hot-loader": "^3.0.4",
     "@types/react-transition-group": "^1.1.1",
+    "@types/webpack-hot-middleware": "^2.16.0",
     "classnames": "^2.2.5",
     "core-js": "^2.4.1",
     "express": "^4.15.4",
@@ -52,6 +53,7 @@
     "react-transition-group": "^1.2.0",
     "semantic-ui-css": "^2.2.10",
     "semantic-ui-react": "^0.72.0",
+    "webpack-hot-middleware": "^2.19.1",
     "webpack-merge": "^4.1.0"
   },
   "devDependencies": {

server/app/index.ts

@@ -4,6 +4,6 @@ import serveApp from "./serveApp";
 
 const app = express();
 
-app.use(serveApp());
+serveApp(app);
 
 export default app;

server/app/serveApp.ts

@@ -1,11 +1,30 @@
+import { Express } from "express";
 import * as webpack from "webpack";
 import * as webpackMiddleware from "webpack-dev-middleware";
+import * as webpackHotMiddleware from "webpack-hot-middleware";
 
 /* tslint:disable-next-line:no-var-requires */
 const webpackConfig = require("../../app/webpack/config.js");
 
-export default function serveApp() {
-    return webpackMiddleware(
-        webpack(webpackConfig),
-    );
+type Logger = (message?: any, ...optionalParams: any[]) => void;
+
+function makeLogFunction(fn: Logger = console.log): Logger {
+    return (m, ...args) => fn("[webpack] " + m, ...args);
+}
+
+export default function serveApp(app: Express) {
+    const compiler = webpack(webpackConfig);
+    app.use(webpackMiddleware(compiler,
+        {
+            noInfo: true,
+            publicPath: webpackConfig.output.publicPath,
+            log: makeLogFunction(),
+            warn: makeLogFunction(console.warn),
+            error: makeLogFunction(console.error),
+        },
+    ));
+    app.use(webpackHotMiddleware(compiler,
+        {
+            log: makeLogFunction(),
+        }));
 }

yarn.lock

@@ -109,6 +109,13 @@
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.0.tgz#3044381647e11ee973c5af2e925323930f691d80"
 
+"@types/webpack-hot-middleware@^2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.16.0.tgz#4fe6b0bc077b43d4341c0c5b212d9198ab8b79a3"
+  dependencies:
+    "@types/connect" "*"
+    "@types/webpack" "*"
+
 "@types/webpack@*":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-3.0.10.tgz#1d27db07df32109f8c882535b547aae4252fd53e"
@@ -3556,7 +3563,7 @@ querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
-querystring@0.2.0:
+querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
@@ -4745,6 +4752,15 @@ webpack-dev-server@^2.4.4:
     webpack-dev-middleware "^1.11.0"
     yargs "^6.0.0"
 
+webpack-hot-middleware@^2.19.1:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.19.1.tgz#5db32c31c955c1ead114d37c7519ea554da0d405"
+  dependencies:
+    ansi-html "0.0.7"
+    html-entities "^1.2.0"
+    querystring "^0.2.0"
+    strip-ansi "^3.0.0"
+
 webpack-merge@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.0.tgz#6ad72223b3e0b837e531e4597c199f909361511e"