build: extract webpack build configuration

.eslintignore

@@ -1,3 +1,4 @@
 .eslintrc
 src/www
-tsconfig.json
+tsconfig.json
+webpack.config.js

package.json

@@ -5,9 +5,10 @@
   "license": "CC0-1.0",
   "scripts": {
     "start": "cross-env NODE_ENV=production node -r dotenv/config dist",
-    "start:dev": "cross-env NODE_ENV=development DEBUG=twitch-channel-redemptions* nodemon -r dotenv/config src/index.ts",
-    "build": "rimraf dist && tsc && yarn build:frontend",
-    "build:frontend": "cross-env NODE_ENV=production ts-node ./runWebpack.ts",
+    "start:dev": "concurrently -r true \"cross-env NODE_ENV=development DEBUG=twitch-channel-redemptions* nodemon -r dotenv/config src/index.ts\" \"yarn webpack:dev\"",
+    "build": "rimraf dist && tsc && yarn webpack",
+    "webpack": "cross-env NODE_ENV=production webpack",
+    "webpack:dev": "cross-env NODE_ENV=development webpack",
     "lint": "cross-env TWITCH_CHANNEL_NAME=alexbcberio eslint src/**/*",
     "lint-fix": "yarn lint --fix"
   },
@@ -44,6 +45,7 @@
     "@typescript-eslint/eslint-plugin": "^5.9.0",
     "@typescript-eslint/parser": "^5.9.0",
     "animate.css": "^4.1.1",
+    "concurrently": "^7.4.0",
     "copy-webpack-plugin": "^10.2.0",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.3.1",
@@ -59,6 +61,7 @@
     "ts-loader": "^9.2.6",
     "ts-node": "^10.0.0",
     "typescript": "^4.3.2",
-    "webpack": "^5.65.0"
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.10.0"
   }
 }

src/backend/index.ts

@@ -2,9 +2,7 @@ import { install, start } from "./webserver";
 
 import { connect } from "./chatClient";
 import { error } from "./helpers/log";
-import { isDevelopment } from "./helpers/util";
 import { registerUserListener } from "./pubSubClient";
-import { runWebpack } from "./helpers/webpack";
 
 const namespace = "App";
 
@@ -18,14 +16,7 @@ function isSetUp() {
   );
 }
 
-let runningWebpack = false;
-
 export async function bootstrap() {
-  if (isDevelopment && runningWebpack === false) {
-    runningWebpack = true;
-    await runWebpack();
-  }
-
   if (!isSetUp()) {
     await install();
     return;

src/backend/helpers/webpack.ts → webpack.config.js

@@ -1,28 +1,25 @@
-import * as CopyPlugin from "copy-webpack-plugin";
-import * as CssMinimizerPlugin from "css-minimizer-webpack-plugin";
-import * as MiniCssExtractPlugin from "mini-css-extract-plugin";
+const CopyPlugin = require("copy-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
-import { Configuration, ProgressPlugin, webpack } from "webpack";
-import { error, extendLogger, warning } from "./log";
-import { isDevelopment, isProduction } from "./util";
-import { parse, resolve } from "path";
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
+const { parse, resolve } = require("path");
 
-const namespace = "Webpack";
-const log = extendLogger(namespace);
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const { ProgressPlugin } = require("webpack");
 
-const context = resolve(__dirname, "../../www");
+const context = resolve(process.cwd(), "src/www");
 
-const regExp: Record<string, RegExp> = {
+const regExp = {
   images: /\.(a?png|gif|jpe?g|svg|webp)$/i,
   fonts: /\.(otf|ttf|woff2?)$/i,
   multimedia: /\.(mp3|webm|mp4)$/i,
 };
 
-// TODO: declare types (d.ts) to import files from TypeScript code
+const isDevelopment = process.env.NODE_ENV === "development";
+const isProduction = !isDevelopment;
 
-const webpackConfig: Configuration = {
+module.exports = {
   mode: isDevelopment ? "development" : "production",
   context,
   devtool: isDevelopment ? "eval" : false,
@@ -58,12 +55,7 @@ const webpackConfig: Configuration = {
       if (!contentType) {
         contentType = "miscellaneous";
 
-        warning(
-          "[%s] Unknown extension %s, falling back to %s",
-          namespace,
-          ext,
-          contentType
-        );
+        console.log(`Unknown extension ${ext}, falling back to ${contentType}`);
       }
 
       return `assets/${contentType}/[name][ext]`;
@@ -130,23 +122,3 @@ const webpackConfig: Configuration = {
     },
   },
 };
-
-function runWebpack(): Promise<void> {
-  return new Promise((res, rej) => {
-    log("Running");
-    webpack(webpackConfig, (err, stats) => {
-      if (err) {
-        error("[%s] %s", namespace, err);
-        rej(err);
-      } else if (stats?.hasErrors() || stats?.hasWarnings()) {
-        error("[%s] %s", namespace, stats);
-      } else {
-        log("Compiled ok");
-      }
-
-      res();
-    });
-  });
-}
-
-export { runWebpack };