In development mode, js references are lost in html and pathData.filename is lost in function when js.filename is a function after the project hot update

[dreampasssser]

Current behaviour

As the title says.

Expected behaviour

Js references are not lost in html and pathData.filename is not lost in function.

Reproduction Example

You can just use the example 'simple-site', in order to keep the folder structure, I wrote a function:

const { relative, resolve, extname } = require('path');

const genNewName = (filename) => {
  console.log('filename: ', filename);
  return relative(
    resolve(__dirname, 'src'),
    filename.slice(0, filename.length - extname(filename).length)
  );
};

This can generate a new name, use it like this:

plugins: [
  new HtmlBundlerPlugin({
    // path to templates
    entry: 'src/views/',
    js: {
      // output filename of compiled JavaScript
      // filename: 'js/[name].[contenthash:8].js',
      filename: function ({ filename }) {
        const newName = genNewName(filename);
        return `${newName}.[contenthash:8].js`;
      },
    },
    css: {
      // output filename of extracted CSS
      filename: 'css/[name].[contenthash:8].css',
    },
  }),
],

It works when npm run build and the 1st time npm run start, but when you modify a style in scss file, it will not work, the loss as title says will happen.

Environment

• OS: [macOS, Linux, Windows] Windows
• version of Node.js: 18.18.2
• version of Webpack: 5.89.0
• version of the Plugin: 3.4.4

Additional context

None.

[webdiscus]

Hello @dreampasssser,

thanks for the issue report. I will fix it.

[dreampasssser]

@webdiscus Well, I also found that the latest version of the Plugin is 3.4.4, but it is still at 3.1.3 in Github releases. There must be something wrong.

[webdiscus]

@dreampasssser

the missing pathData.filename is a Webpack bug. I can reproduce it w/o the plugin, just with minimal Webpack config:

const path = require('path');

module.exports = {
  mode: 'production',

  output: {
    path: path.join(__dirname, 'dist/'),
    filename: (pathData) => {
      const { filename } = pathData;
      console.log('-- JS.filename: ', {
        filename, // => undefined
      });

      return '[name].bundle.js';
    },
  },

  entry: {
    main: './src/main.js', // => dist/main.bundle.js
  },
};

But I have fixed the issue in the plugin. I just test it by me local.

[webdiscus]

@dreampasssser

the pathData.filename is fixed in the version 3.4.5. Can you please check it in your project?

You can use the manual watch test to create a simple repo if you have any issue.

[dreampasssser]

@webdiscus

Oh, you are so efficient. I checked it, it's OK. The pathData.filename is back, but the pathData.chunk.name is lost, it still existed in last version(3.4.4).

[webdiscus]

@dreampasssser

I'm sorry, the pathData.chunk.name is in 3.4.6 fixed. Thank you!

[dreampasssser]

@webdiscus

That's all right!