Menu
I'm trying to use HtmlWebpackPlugin to generate .HTML file
when running build with webpack i get this issue where the src of script tag in HTML file is not same as the script file name
here is my webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: { index: path.resolve(__dirname, '../src/index.js') },
output: {
filename: 'bundle.[fullhash].js',
path: path.resolve(__dirname, '../dist/'),
},
devtool: 'source-map',
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
minify: true,
}),
],
module: {
rules: [
// HTML
{
test: /\.(html)$/,
use: ['html-loader'],
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
// CSS
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets/images/',
},
},
],
},
],
},
};
this is the generated HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Document</title>
<script
defer="defer"
src="bundle.3d5baadb547d13677f00.js?3d5baadb547d13677f00"
></script>
</head>
<body>
<script src="1ec740dc7ce75155c1fd.js"></script>
</body>
</html>
and here is my dist folder:
as you can see the name of bundle file is okay, but the script tag at the and of the body has wrong src
684
asked Oct 30 '25 23:10
I found a solution to this in the comments of this Github issue: https://github.com/jantimon/html-webpack-plugin/issues/1638
In the optimization section of your webpack config file, set realContentHash to false:
optimization: {
// other config ...
realContentHash: false,
},
So for example my webpack configuration object looks like this:
{
mode: ...,
entry: ...,
output: ...,
module: ...,
plugins: ...,
optimization: {
minimizer: [new CssMinimizerPlugin(), "..."], // other config
realContentHash: false,
}
}
This can sometimes produce the suboptimal situation where hashes change more than is necessary, but it seems to be the best solution for now (pending updates to the issue.)
131
answered Nov 02 '25 13:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With