fix(ssr): imported svg paths set wrong

[LeoMcA]

Summary

follow up to #10982 which fixes things for svgs too

Problem

As in #10982, importing svg files like import pathToSVG from "foobar.svg" fails when SSRing, with webpack setting the path to a local file:// path, this is due to a misconfiguration in our SSR webpack config.

Solution

Mirror the svg config from our client webpack config, with some tweaks to ensure the output path is correct, and the svg doesn't actually get output (the client webpack run takes care of that).

Longer term we should replace file-loader with asset modules, but this'll require a change to how we import svgs as react modules, so deferring that for now to the wider webpack cleanup I'm working on.

---

Screenshots

No change

---

How did you test this change?

Before checking out this change, import an svg somewhere and add it to an <img>, let's say client/src/homepage/index.tsx:

...
import example from "../assets/mdn-logo.svg";
...
<img src={example} />
...

Run yarn dev
Open http://localhost:5042/en-US/ and observe an error in the console, along with a broken image:
Security Error: Content at http://localhost:5042/en-US/ may not load or link to file:///workspace/yari/ssr/dist//distimages/0190b323502da5d19d9a1b6ced997386.svg.

Check out this change (keeping the changes to client/src/homepage/index.tsx)
Run yarn dev again
Open http://localhost:5042/en-US/ and observe no error in the console, along with a loaded image!