Add webpack for external frontend libraries.

package.json

@@ -14,6 +14,7 @@
         "csrf-csrf": "^2.2.3",
         "express": "^4.21.0",
         "form-data": "^4.0.0",
+        "fuse.js": "^7.0.0",
         "google-translate-api-x": "^10.7.1",
         "helmet": "^7.1.0",
         "html-entities": "^2.5.2",
@@ -39,6 +40,8 @@
         "tiktoken": "^1.0.16",
         "vectra": "^0.2.2",
         "wavefile": "^11.0.0",
+        "webpack": "^5.95.0",
+        "webpack-dev-middleware": "^7.4.2",
         "write-file-atomic": "^5.0.1",
         "ws": "^8.17.1",
         "yaml": "^2.3.4",

public/lib.js

@@ -0,0 +1,9 @@
+/**
+ * Add all the libraries that you want to expose to the client here.
+ * They are bundled and exposed by Webpack in the /lib.js file.
+ */
+import Fuse from 'fuse.js';
+
+export {
+    Fuse,
+};

server.js

@@ -54,6 +54,8 @@ import {
     tryAutoLogin,
     router as userDataRouter,
 } from './src/users.js';
+
+import getWebpackServeMiddleware from './src/middleware/webpack-serve.js';
 import basicAuthMiddleware from './src/middleware/basicAuth.js';
 import whitelistMiddleware from './src/middleware/whitelist.js';
 import multerMonkeyPatch from './src/middleware/multerMonkeyPatch.js';
@@ -438,6 +440,7 @@ app.get('/login', async (request, response) => {
 });
 
 // Host frontend assets
+app.use(getWebpackServeMiddleware());
 app.use(express.static(process.cwd() + '/public', {}));
 
 // Public API

src/middleware/webpack-serve.js

@@ -0,0 +1,9 @@
+import webpack from 'webpack';
+import middleware from 'webpack-dev-middleware';
+import { publicLibConfig } from '../../webpack.config.js';
+
+export default function getWebpackServeMiddleware() {
+    const compiler = webpack(publicLibConfig);
+
+    return middleware(compiler, {});
+}

webpack.config.js

@@ -0,0 +1,20 @@
+/** @type {import('webpack').Configuration} */
+export const publicLibConfig = {
+    mode: 'production',
+    entry: './public/lib.js',
+    cache: true,
+    devtool: 'source-map',
+    module: {
+        rules: [{
+            test: /\.js$/,
+            exclude: /node_modules/,
+        }],
+    },
+    experiments: {
+        outputModule: true,
+    },
+    output: {
+        filename: 'lib.js',
+        libraryTarget: 'module',
+    },
+};