Assets file name collision

I want to open this issue again with one more case https://github.com/JeffreyWay/laravel-mix/issues/2910 We have vue components and each component can have its own assets inside the components folder.

It was a matter of time when we come to a situation when two different components have two different images with the same name. Rename images? It’s not a solution anyway.

For now, we use this temp workaround:

mix.extend('addHashToImagesFileNames', (webpackConfig) => {
  const imagesRule = webpackConfig.module.rules.find((rule) => {
    const { test } = rule;
    return test && typeof test.test === 'function' && test.test('.png');
  });

  if (!imagesRule) return;

  imagesRule.use.forEach(({ options }) => {
    if (options.name && typeof options.name === 'function') {
      options.name = (path) => {
        if (!/node_modules|bower_components/.test(path)) {
          return 'assets/images/[name].[hash:8].[ext]';
        }

        return (
          'assets/images/vendor/' +
          path
            .replace(/\\/g, '/')
            .replace(
              /((.*(node_modules|bower_components))|images|image|img|assets)\//g,
              ''
            ) +
          '?[hash]'
        );
      }
    }
  });
});
mix.addHashToImagesFileNames();

I have read the argument here https://github.com/JeffreyWay/laravel-mix/pull/2911#issuecomment-811079865 But why not do it optional? Just add addHashToFilenames option with default false value.

[thecrypticace]

I think this is something we should fix as an opt in. But I also think the only proper way to do this is to include the hash in the filename itself and not in a query string for the file in the manifest.

If we do this it’ll be in tandem with the switch to asset modules (see #3059).

[codemonkeynorth]

@thecrypticace does the code I noted in my reply here help?

https://github.com/laravel-mix/laravel-mix/issues/3211#issuecomment-1141640373

We had a similar issue with WPEmerge theme where assets weren’t getting copied with subfolders. It needs path.relative ideally to retain folder structure from src to dist

another implementation here for relative paths: https://github.com/webpack-contrib/file-loader/issues/261#issuecomment-576061837