Use Webpack

package.json

@@ -44,11 +44,16 @@
     "@types/luxon": "^1.15.2",
     "@types/node": "^12.7.5",
     "@types/pino": "^5.8.10",
+    "@types/webpack-dev-middleware": "^2.0.3",
     "pino-pretty": "^3.2.1",
+    "ts-loader": "^6.2.0",
     "ts-node-dev": "^1.0.0-pre.43",
     "tsconfig-paths": "^3.9.0",
     "tslint": "^5.20.0",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.6.3",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-middleware": "^3.7.2"
   }
 }

src/frontend/index.ts

@@ -0,0 +1,3 @@
+import { noise } from "./noise";
+
+window.onload = noise;

src/frontend/noise.ts

@@ -0,0 +1,3 @@
+export const noise = () => {
+  alert("Hello!");
+};

src/index.ts

@@ -37,6 +37,20 @@ async function main() {
   app.use(express.json());
   app.use(express.urlencoded({ extended: false }));
   app.use(cookieParser());
+
+  if (app.settings.env === "development") {
+    const webpack = require("webpack"); // tslint:disable-line:no-implicit-dependencies
+    const webpackDevMiddleware = require("webpack-dev-middleware"); // tslint:disable-line:no-implicit-dependencies
+    const config = require("../webpack.config").default;
+
+    const compiler = webpack(config);
+    app.use(
+      webpackDevMiddleware(compiler, {
+        publicPath: "/assets/"
+      })
+    );
+  }
+
   app.set("view engine", "pug");
 
   app.use("/", indexRouter);

views/index.pug

@@ -1,6 +1,7 @@
 html
   head
     title= title
+    script(src="/assets/main.bundle.js")
   body
     h1= message
     p hahaha

webpack.config.ts

@@ -0,0 +1,27 @@
+import path from "path";
+import webpack from "webpack"; // tslint:disable-line:no-implicit-dependencies
+
+const config: webpack.Configuration = {
+  devtool: "inline-source-map",
+  entry: "./src/frontend/index.ts",
+  mode: "development",
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        test: /\.tsx?$/,
+        use: "ts-loader"
+      }
+    ]
+  },
+  output: {
+    filename: "[name].bundle.js",
+    path: path.resolve(__dirname, "dist"),
+    publicPath: "/assets/"
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"]
+  }
+};
+
+export default config;