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

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/',
            },
          },
        ],
      },
    ],
  },
};

JavaScript
​x
 
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>

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

Answer

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,
},

JavaScript
 
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,
    }
}

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

Advertisement

Answer