Changes when using webpck watch mode do not regenerate the HTML file

[zlangbert]

I am having an issue where when running webpack in watch mode changes to the source that gets inlined does not trigger a rebuild of the html file.

Environment and package version

Webpack 5.27.2, HTML webpack plugin 5.3.1 , HTML inline script plugin 2.0.0

Reproduction link / code sample

Here is my webpack config which hopefully gives you an idea of the setup.

const path = require('path')
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development'
  entry: {
    ui: './src/ui/ui.tsx',
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
      {
        test: /\.(png|jpg|gif|webp|svg|zip)$/,
        type: "asset/inline"
      },
    ],
  },
  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "src/manifest.json", },
      ],
    }),
    new HtmlWebpackPlugin({
      template: './src/ui/ui.html',
      filename: 'ui.html',
      chunks: ['ui'],
    }),
    new HtmlInlineScriptPlugin([/ui.js/]),
  ],
})

Steps to reproduce

1. Run webpack --watch
2. Make a change to ui.tsx

Webpack logs show that ui.tsx is regenerated but ui.html is not emitted. However if I change the HTML file itself ui.html does get emitted.

What is expected?

I would expect that the HTML file is regenerated when the code that is being inlined is changed.

What is actually happening?

Webpack does not regenerate the HTML file and no changes are actually written.

Let me know if you need any more info, thanks!

[icelam]

Hi @zlangbert, thank you for the detailed explanation of your issue. After investigating a bit, the issue seems to be laying in the html-webpack-plugin.

When looking at the source code of html-webpack-plugin, we can see on line 255 of this file if else logic to check whether the assets will be regenerated:

// Code from https://github.com/jantimon/html-webpack-plugin/blob/0a6568d587a82d88fd3a0617234ca98d26a1e0a6/index.js#L255-L263
if (isCompilationCached && options.cache && assetJson === newAssetJson) {
  previousEmittedAssets.forEach(({ name, html }) => {
    compilation.emitAsset(name, new webpack.sources.RawSource(html, false));
  });
  return callback();
} else {
  previousEmittedAssets = [];
  assetJson = newAssetJson;
}

While the default setting of isCompilationCached is true, assetJson and newAssetJson seems to have the same output equals to "['ui.js']", so the new assets isn't generated.

---

To solve the issue, I have 2 recommendations here:

1. Turn off caching by adding cache: false to HtmlWebpackPlugin, this will affect the performance of the webpack build

new HtmlWebpackPlugin({
  template: path.resolve(__dirname, '../src/ui/ui.html'),
  filename: 'ui.html',
  chunks: ['ui'],
  cache: false, // Turn off caching
})

2. Include the hash or chunkhash in the output filename

output: {
  filename: '[name].[hash].js', // or '[name].[chunkhash:8].js',
  // ...other output settings
},
plugins: [
  // ... other plugins here
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../src/ui/ui.html'),
    filename: 'ui.html',
    chunks: ['ui'],
  }),
  new HtmlInlineScriptPlugin([/ui.[a-zA-Z0-9]+.js/]),
]

---

Let me know if the above solutions solve your issue or not 😃

[zlangbert]

Hey @icelam, thank you so much for looking in to it and the detailed response.

Either of those options fix the issue for me, I will likely go with option 2. Thank you!

[icelam]

@zlangbert You're welcome. Glad to hear that it solves the issue!