Why isn't javascript executing for one of my webpack entry points?

Summary I'm developing a front end with multiple webpack entry points using vanilla js and bootstrap 5. All of the entry points I've declared bar one are working and I can't understand why the remaining one is not. I'm using dev server and trying to console log javascript when the browser hits the relevant page but nothing is showing up. The relevant console log function does, however, show up in the output from the dist directory when I build a production version of the project.

What I've tried I've read widely on stack overflow and through the webpack documentation and can't locate a solution or explanation about this specific behaviour. I additionally can instantiate other entry points with different names and webpack picks these up and maps them correctly. After many hours of reading documentation and adjusting settings in webpack, I tried getting around the issue by just rebuilding the relevant file with a different name, and associating a new entry point with it, which did work initially. However, I refactored the code within the relevant html file so that it is similar to another in the project and webpack is, bizarrely, no longer picking up the entry point. Hot module replacement also was previously monitoring this file and is now not.

I am a novice developer so could just be missing something obvious. Also, I don't really have the vocabulary to describe the mechanics of this but it feels like webpack has somehow 'cached' some code for two entry points together and is not picking up that they are meant to be different. I'm in the process of rebuilding and refactoring this project from a previous one so there's stuff everywhere - excuse the various similar file names. Grateful for any assistance.

Code The problematic entry point is 'signIn2'. All entry points are below:

module.exports = {
  entry: {
    main: './src/client/js/main/main.js',
    login: './src/client/js/login/login.js',
    signInSelect: './src/client/js/signInSelect/signInSelect.js',
    signInDJ: './src/client/js/signInDJ/signInDJ.js',
    signInPatron: './src/client/js/signInPatron/signInPatron.js',
    demoUpload: './src/client/js/fileUpload/fileUpload.js',
    signIn2: './src/client/js/signIn2/signIn2.js'
  },

The relevant HtmlWebpackPlugin instance:

new HtmlWebpackPlugin({
  filename: 'html/signIn2.html',
  template: 'src/client/html/signIn2.html',
  inject: true,
  chunks: ['signIn2']
}),

Optimization settings:

  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }

The javascript entry point file:

// note - css is not hitting the page and it was previously
import '../../css/signIn.css';
import 'regenerator-runtime/runtime.js';
import { createNewUser } from './createNewUser';
import { uploadUserName } from './uploadUserName';
import { modal } from './modal';

// The below should log to the console but doesn't
console.log('This is signIn2'); 

const btnSignUp = document.getElementById('submitBtn');

// Add signup event
btnSignUp.addEventListener('click', async e => {
  e.preventDefault();
  // validation goes here
  createNewUser();
  
});

An excerpt from the signIn2 bundle output in dist:

e()(n.Z, { insert: 'head', singleton: !1 }),
        n.Z.locals,
        r(666),
        console.log('This is signIn2'), // <= note console.log is present
        document.getElementById('submitBtn').addEventListener(
          'click',

Apologies in advance if I've omitted useful details or code - I will happily provide more if appropriate. Many thanks for any assistance.