Upgrading node/npm dist cofiguration

I have a ten-year old node application which I am now (at long last) upgrading to the latest packages. I have finally got everything compiled without error, and the reward is that npm creates a new dist folder which, I guess, should allow the browser to run the application. However, when I access the application from the web, it loads the index.html file but then nothing happens. The dist folder contains just two files: app.bundle.js and t.bundle.js. Now here is the odd thing: if I replace this dist folder by the original dist folder, as compiled months ago before I started the upgrade, everything works! This original dist folder contains 66 items,including app.bundle.js and t.bundle.js.

However, this is very unsatisfactory. The working dist folder is frozen, and all the changes I made in the last months to the source are ignored. I am guessing this is due to the configuration in the package.json and webpack.js files still pointing at the legacy implementation. However, I can not work out from all the documentation I have looked at just how thw package.json and webpack.js should be set up now.

Here is how files are arranged:

tc (top level)    
    -- package.json
    -- public folder
    -- various other folders containing source for the server backend
    -- node-modules folder

public (folder contained in tc)
   -- dist folder
   -- app folder
   -- index.html
   -- t.html
   -- webpack.js

app (folder contained in public)
   -- app.html 
   -- hundreds of files holding all the code presented by the browser

Here is the package.json file:

{
  "name": "tc",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "pm2 startOrReload pm2.json",
    "prod": "pm2 startOrReload pm2.json --env production",
    "logs": "pm2 logs",
    "test": "node --use_strict $(npm bin)/jasmine"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "async": "^3.2.6",
    "base64url": "^3.0.1",
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.2",
    "bootstrap": "^5.3.3",
    "bootstrap-less": "^3.3.8",
    "bson": "^6.8.0",
    "codemirror": "^5.65.17",
    "connect-flash": "^0.1.1",
    "connect-mongo": "^5.1.0",
    "cookie-parser": "^1.4.6",
    "dropzone": "^6.0.0-beta.2",
    "ejs": "^3.1.10",
    "express": "^4.19.2",
    "express-session": "^1.18.0",
    "file-saver": "^2.0.5",
    "gridfs-stream": "^1.1.1",
    "jquery": "^3.7.1",
    "jsdom": "^24.1.1",
    "jszip": "^3.10.1",
    "jszip-utils": "^0.1.0",
    "libxmljs": "^1.0.11",
    "lodash": "^4.17.21",
    "mongo-connect": "^0.0.6",
    "mongoose": "^8.5.3",
    "morgan": "^1.10.0",
    "multer": "^1.4.5-lts.1",
    "nodemailer": "^6.9.14",
    "nodemailer-mailgun-transport": "^2.1.5",
    "openseadragon": "^5.0.0",
    "passport": "^0.7.0",
    "passport-facebook": "^3.0.0",
    "passport-google-oauth": "^2.0.0",
    "passport-local": "^1.0.0",
    "passport-twitter": "^1.0.4",
    "promise-defer": "^1.0.0",
    "require-in-the-middle": "^7.4.0",
    "serve-favicon": "^2.5.0",
    "sort-array": "^4.1.5",
    "urijs": "^1.19.11"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "jasmine": "^5.2.0",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.9.1",
    "style-loader": "^4.0.0",
    "webpack": "^5.94.0"
  }
}

And here is the webpack.js file which creates the bundle for the browser:

var _ = require('lodash')
  , webpack = require('webpack')
  , ResolverPlugin = webpack.ResolverPlugin
  , ProvidePlugin = webpack.ProvidePlugin
  , IgnorePlugin = webpack.IgnorePlugin
//  , ExtractTextPlugin = require("extract-text-webpack-plugin")
  , path = require('path')
  , clientRoot = path.resolve(__dirname)
  , bowerRoot = path.resolve(clientRoot, '..', 'bower_components')
  , nodeRoot = path.resolve(clientRoot, '..', 'node_modules')
  , devtool = 'eval-source-map'
  , debug = true
;
switch (process.env.NODE_ENV) {
  case 'production':
    devtool = '#source-map';
    debug = false;
    break;
  case 'development':
    devtool = 'eval-source-map';
    debug = true;
    break;
}
var config = {
  context: clientRoot,
  mode: "development",
  entry: {
    app: path.join(clientRoot, 'app/boot.js'),
    t: path.join(clientRoot, 'app/t.js'),
  },
  output: {
    path: path.join(clientRoot, 'dist'),
    filename: '[name].bundle.js',
    devtoolModuleFilenameTemplate(info) {
     return `file:///${info.absoluteResourcePath.replace(/\/g, '/')}`;
   },
  },
  externals: {
    jquery: 'jQuery',
    rxjs: 'Rx',
    lodash: '_',
    bson: 'bson',
    'codemirror/lib/codemirror': 'CodeMirror',
    'codemirror/mode/xml/xml': false,
  },
  module: {
    rules: [
      {
        test: /.png(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /.jpg(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /.woff(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /.woff2(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /.ttf(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/octet-stream&prefix=dist/"
      }, {
        test: /.eot(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/vnd.ms-fontobject&prefix=dist/"
      }, {
        test: /.svg(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=image/svg+xml&prefix=dist/"
      },
      {
        test: /.css$/, 
        use:["style-loader", "css-loader"]
        //loader: 'style!css'
      },
      {
        test: /.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: {
    //          javascriptEnabled: true,
              },
            }, 
          },
        ],
      },
    ], /*,
    noParse: [
    ] */
  },
  resolve: {
 /*   root: [clientRoot], */
    modules: [clientRoot, 'web_modules', 'node_modules', 'bower_components', ],
    fallback: {
        "fs": false,
        "tls": false,
        "net": false,
        "path": false,
        "zlib": false,
        "http": false,
        "https": false,
        "stream": false,
        "crypto": false,
        "crypto-browserify": false, //if you want to use this module also don't forget npm i crypto-browserify 
      },
    alias: {
      bower: bowerRoot,
      node: nodeRoot,
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
     new webpack.LoaderOptionsPlugin({
        debug: true
    }),
  ],
  devtool: devtool,
};
var compiler = webpack(config);
if (process.env.NODE_ENV === 'development') {
  compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
} else {
 compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
  //compiler.run(handleError);
}
function handleError(err, stats) {
  console.log(JSON.stringify({
    colors: true,
    cached: false,
  }));
}

I am running node 20.17.0.