refactor: Group webpack config which is specific for loading assets

The existing webpack config customizes the filenames of any assets we import
which have not been inlined using the `assetModuleFilename`.

This config option is defined at the global level, however it only applies to
assets that are processed by the Asset module definition.

Rather than configuring this globally, I have opted for defining it within the
Asset module definition (nested under the `generator` option) as that makes it
clearer that this option is only relevant for those assets thus making it easier
for future developers to understand and make changes in the future, especially
for those who are less familiar with the intricacies of webpack config.

[1] https://webpack.js.org/guides/asset-modules/

Co-Authored-By: Chris Lowis <[email protected]>

Author: sebjacobs

webpack.config.js

@@ -16,7 +16,6 @@ const baseConfig = new ScratchWebpackConfigBuilder(
     .setTarget('browserslist')
     .merge({
         output: {
-            assetModuleFilename: 'static/assets/[name].[hash][ext][query]',
             library: {
                 name: 'GUI',
                 type: 'umd2'
@@ -32,7 +31,10 @@ const baseConfig = new ScratchWebpackConfigBuilder(
     .addModuleRule({
         test: /\.(svg|png|wav|mp3|gif|jpg)$/,
         resourceQuery: /^$/, // reject any query string
-        type: 'asset' // let webpack decide on the best type of asset
+        type: 'asset', // let webpack decide on the best type of asset
+        generator: {
+            filename: 'static/assets/[name].[hash][ext][query]',
+        },
     })
     .addPlugin(new webpack.DefinePlugin({
         'process.env.DEBUG': Boolean(process.env.DEBUG),