Lack of javascript error messages with webpack when missing a dependency

I've been recently frustrated when developing using Webpack, because whenever I introuduce a new dependency there are no printed errors if I forget to include the depending JavaScript file(s).

I have created an example project: https://github.com/manstie/test-django-webpack

In the example you can see I have purposely set up the home module to depend on the utils module.

When you run the server and load localhost:8000 it is expected that you get a console log of Here and You have successfully depended on utils.js if you import all the necessary script files.

When utils.js is not included in index.html, base.js does not run at all - it silently fails, with no errors.

I am hoping there is a way to have errors show in the javascript console in these cases? I just can't find any resources or related questions on this issue.

Here is the webpack.common.js config:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

const dist = path.resolve(__dirname, 'static/bundles');

module.exports = {
  entry: {
    utils: './home/js/utils.js',
    home: {
      import: './home/js/index.js',
      dependOn: ['utils']
    }
  },
  resolve: {
    modules: ['node_modules']
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: dist,
    publicPath: 'bundles/',
  },
  plugins: [
    new CleanWebpackPlugin(),  // deletes files inside of output path folder
    new WebpackManifestPlugin({ fileName: "../../manifest.json" }),
  ],
  optimization: {
    moduleIds: 'deterministic', // so that file hashes don't change unexpectedly?
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
};

Here is the html with a missing dependency - I am using django-manifest-loader in order to prevent JavaScript caching issues

...
{% load manifest %}
<script src="{% manifest 'runtime.js' %}"></script>
<!-- Is there a way to have webpack / js tell you about the missing dependency? -->
<!-- <script src="{% manifest 'utils.js' %}"></script> -->
<script src="{% manifest 'home.js' %}"></script>
...

And here are the js files:

index.js

import { testFunc } from "./utils.js";

console.log("Here");

testFunc();

utils.js

export function testFunc()
{
    console.log("You have successfully depended on utils.js");
}

Thanks in advance.