Set filename output for webpack

How can I set the output filename in webpack? Sometimes the transpiled filename changes. I'am using sc.recipe.staticresources and output has a filename like cover-89d3ed4.css and cover-89d3ed4.js I need fix to use in manifest theme.

Sometimes the transpiled filename changes.

Actually, the filename always changes. The idea here is to version your index.html and static resources only in webpack folder and, specially when releasing your package (or using a watch mecanism while developing), you run the transpiler which will do all this work. In a nutshell:

  • All static is kept in webpack folder;
  • You run a command to create the static resources with the hash in the filename in the folder of your theme package (bin/build-<short_name-staticresources-name>);
  • The index.html file which was in webpack folder will be created in the theme package with the correct hash references of the static files.

Although in portuguese, you can check exactly this in action in Check for <short_name-staticresources-name> and the webpack configuration files and how the final distribution is created in The watch mecanism is explained there as well.

Another approach with sc.recipe.staticresources is using a viewlet in IHtmlHead that will create a file with the correct hashes. Check (actually the PR to get some ideas about this approach.

1 Like