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
job-index@1.0.0 /Users/andreivictor/Work/job-index
├─┬ clean-webpack-plugin@4.0.0
│ └── webpack@5.88.1 deduped
├─┬ copy-webpack-plugin@11.0.0
│ └── webpack@5.88.1 deduped
├─┬ css-loader@6.8.1
│ └── webpack@5.88.1 deduped
├─┬ css-minimizer-webpack-plugin@5.0.1
│ └── webpack@5.88.1 deduped
├─┬ html-loader@4.2.0
│ └── webpack@5.88.1 deduped
├─┬ html-webpack-plugin@5.5.3
│ └── webpack@5.88.1 deduped
├─┬ image-minimizer-webpack-plugin@3.8.3
│ └── webpack@5.88.1 deduped
├─┬ mini-css-extract-plugin@2.7.6
│ └── webpack@5.88.1 deduped
├─┬ sass-loader@13.3.2
│ └── webpack@5.88.1 deduped
├─┬ webpack-cli@5.1.4
│ ├─┬ @webpack-cli/configtest@2.1.1
│ │ └── webpack@5.88.1 deduped
│ ├─┬ @webpack-cli/info@2.0.2
│ │ └── webpack@5.88.1 deduped
│ ├─┬ @webpack-cli/serve@2.0.5
│ │ └── webpack@5.88.1 deduped
│ └── webpack@5.88.1 deduped
├─┬ webpack-dev-server@4.15.1
│ ├─┬ webpack-dev-middleware@5.3.3
│ │ └── webpack@5.88.1 deduped
│ └── webpack@5.88.1 deduped
└─┬ webpack@5.88.1
  └─┬ terser-webpack-plugin@5.3.9
    └── webpack@5.88.1 deduped

job-index@1.0.0 /Users/andreivictor/Work/job-index
└── html-webpack-plugin@5.5.3

[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!