jantimon
Unable to include a static JS file (generated hashed filename does not match the one in the index.html)
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]
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!