Unable to include a static JS file (generated hashed filename does not match the one in the index.html)

[andreivictor]

Current behaviour 💣

In the index.html I want to include a static JS File (a 3rd party JS file, not bundled with webpack):

index.html

<script src="modernizr.js"></script>

This file should be included before the main JS file (injected by html-webpack-plugin) and should not be defered. It's name should also be unique (hashed).

After build, the dist folder contains:

index.html:

<script src="modernizr.d680fb275258c1e22931.js">

<script defer="defer" src="js/index.0e428668b6b726cf637e.js">

but the generated js file is: modernizr.d14201e2d4a0ec290a14.js

asset modernizr.d14201e2d4a0ec290a14.js 10.5 KiB [emitted] [immutable] [from: modernizr.js] [minimized] 1 related asset

So the filenames do not match (content hashes are different) and the browser returns a 404 error.

When running webpack serve, it seems that the generated hashes are the same.

Expected behaviour ☀️

After build, the generated filename should match the filename referanced in dist html file.

Reproduction Example 👾

Use the following code above.

webpack.config.js

...
module: {
  rules: {
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
     {
        test: /modernizr\.js$/i,
        type: "asset/resource",
        generator: {
          filename: "[name].[contenthash].js"
        },
      },

  }
}
...

Environment 🖥

Node.js v18.15.0
darwin 22.3.0
9.5.0
[email protected] /Users/andreivictor/Work/job-index
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @webpack-cli/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @webpack-cli/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @webpack-cli/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] deduped

[email protected] /Users/andreivictor/Work/job-index
└── [email protected]

[alexander-akait]

Can you provide reproducible test repo?

[andreivictor]

Sorry for the delay,

Please check the following repo:
https://github.com/andreivictor/webpack-starter-html-loader

When running webpack serve, the script is included ok:
<script src="modernizr.e6183722abbaa4f38f55.js"></script>

On build, the script is included in html like this:
<script src="modernizr.e6183722abbaa4f38f55.js"></script>, but in the dist folder there is:
modernizr.7111043e1acedc783e40.js

Thank you!