HtmlWebpackPlugin: wrong hash for script file is injected into html file

Question

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

i have the same issue. hope someone knows the solution!

Nikhil Nayyar
– Nikhil Nayyar

2021-10-11 17:13:29 +00:00
Commented Oct 11, 2021 at 17:13 — Nikhil Nayyar
– Nikhil Nayyar, Commented Oct 11, 2021 at 17:13

giantpredatorymollusk · Accepted Answer · 2021-12-07 07:27:34Z

5

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.)

answered Dec 7, 2021 at 7:27

giantpredatorymollusk

1321 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HtmlWebpackPlugin: wrong hash for script file is injected into html file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related