Implement Asset Modules in Webpack - Fixes #2023

[adityagarg06]

This PR addresses issue #2023. Changes:

• Replaced the file-loader with asset/resource.
• Replaced raw-loader with asset/source.
• Added the generator option to control the output path

I have verified that this pull request:

• [x] has no linting errors (npm run lint)
• [x] has no test errors (npm run test)
• [x] is from a uniquely-named feature branch and is up to date with the develop branch.
• [x] is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

Thanks for working on this! I appreciate your notes on what you changed because that definitely helps us to review it.

I'm comparing this to closed PR #2026 and there are a few difference I notice. I'm not sure which one is correct off the top of my head - I need to look at some webpack docs.

• They removed file-loader etc from the package.json
• They have a period between [name].[ext] but you have [name][ext]
• They are using [hash] instead of [name] for image files in the production version. I'm not sure the implications of this or if it requires additional setup. At the moment we are using [name] so I doubt it's a problem to stick with that.

[adityagarg06]

Thanks for working on this! I appreciate your notes on what you changed because that definitely helps us to review it.

I'm comparing this to closed PR #2026 and there are a few difference I notice. I'm not sure which one is correct off the top of my head - I need to look at some webpack docs.

• They removed file-loader etc from the package.json
• They have a period between [name].[ext] but you have [name][ext]
• They are using [hash] instead of [name] for image files in the production version. I'm not sure the implications of this or if it requires additional setup. At the moment we are using [name] so I doubt it's a problem to stick with that.

Hi @lindapaiste, I think there must be a period between the name and the extension. If the original file is "example.png", the output file would be "example.png" in the "images" directory but if we don't add a period the output file will be examplepng.

The first configuration with [hash] in the filename ensures cache busting by generating a unique filename based on the file content. This is useful for handling browser caching and ensuring that updated assets are fetched by clients.

The second configuration without a hash in the filename produces a consistent output filename based on the original file's name and extension.

[adityagarg06]

I'm adding the period but I'm leaving the hash config up to you.