fix: explicitly set publicPath for static assets

RaspberryPiFoundation/experience-cs#23

We recently embedded the scratch-gui within our Experience CS app.

We have since noticed a number of issues with assets failing to load within the
browser, for example the browser is attempting to load assets from URLs relative
to the webpack entry point (rather than from the root or from `/scratch-gui/`).

After some investigation it turns out that is due to the fact that the webpack
option `publicPath` had not been explicity set [1] (which apparently default to
`auto`).

From digging into the webpack docs [2], it looks like when `publicPath` is set
to `auto` it will attempt to load assets relative to the entrypoint which is not
what we want.

For our purposes we want assets to be served from `/scratch-gui`, and I can't
see the need to make this configurable at this stage, therefore I have hardcoded
this value for now as that also makes building the package less prone to error.
However if we were to push changes upstream, then I think it would make sense to
use an ASSET_PATH environment variable.

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 really 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.

I also dug into the latest version of scratch-gui and
scratch-webpack-configuration and can confirm that this would still be an issue
even with the latest releases, but at least they are now explicit about setting
`publicPath` to `auto`, rather than the config option missing entirely and
falling back to the default value of `auto` [3].

[1]

https://github.com/scratchfoundation/scratch-webpack-configuration/blob/v1.5.1/src/index.cjs#L71
https://github.com/RaspberryPiFoundation/scratch-gui/blob/b723be4d1/webpack.config.js#L20

[2]

https://webpack.js.org/guides/public-path/

```
**Automatic publicPath**

There are chances that you don't know what the publicPath will be in advance,
and webpack can handle it automatically for you by determining the public path
from variables like import.meta.url, document.currentScript, script.src or
self.location.
```

[3]

https://github.com/scratchfoundation/scratch-gui/blob/853caca41/webpack.config.js#L29

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

Author: sebjacobs

webpack.config.js

@@ -12,6 +12,8 @@ const postcssImport = require('postcss-import');
 
 const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
 
+const ASSET_PATH = '/scratch-gui/';
+
 const baseConfig = new ScratchWebpackConfigBuilder(
     {
         rootPath: path.resolve(__dirname),
@@ -76,6 +78,7 @@ const baseConfig = new ScratchWebpackConfigBuilder(
         type: 'asset', // let webpack decide on the best type of asset
         generator: {
             filename: 'static/assets/[name].[hash][ext][query]',
+            publicPath: ASSET_PATH,
         },
     })
     .addModuleRule({