fix: Remove custom image rules

[g-elwell]

Description

Removes custom image loader(s) in favour of those provided by wp-scripts

An issue was reported #144 where font files were being processed incorrectly, this was due to the combination of both wp-scripts loaders and our own being applied. Having audited what our loaders were doing, it's safe to remove them.

Fonts and images (png|woff|woff2|eot|ttf|gif|jpg|jpeg)

These were being copied by file-loader previously, will now be handled by wp-scripts which includes a couple of additional file types too:

• bmp|png|jpe?g|gif|webp - get copied to dist/images
• woff|woff2|eot|ttf|otf - get copied to dist/fonts

It doesn't matter where you're storing the files in your project, referencing them in JS/(S)CSS will cause webpack to find them and copy the files to dist with hashes added to their names.

SVGs

wp-scripts covers using SVGs both as files/resources and in React as components, although this differs from how we have been using it previously:

Import SVG as component

Syntax is different

Previous:
import SVG from '../logo.svg';

wp-scripts:
import { ReactComponent as SVG } from '../logo.svg';

Import SVG as url

Syntax is different - the SVG isn't copied to dist, it's base64 encoded. Tested working in both JS and (S)CSS.

Previous:
import svg from '../svg-file.svg?url';

wp-scripts:
import svg from '../svg-file.svg';

How to test

I've tested the reported issue is resolved by this change by following the steps outlined there. The font file is copied to dist correctly and referenced correctly in the generated CSS file.

project
  static
    font.woff2
  src
    entrypoints
      editor
        index.js
        styles.scss
  dist
    fonts
      font.4fea716b.woff2
    editor.css

// styles.scss contains:
@font-face {
  font-family: 'my-font-family';
  src: url('../../../static/font.woff2') format('woff2');
  font-display: swap;
}

// generated editor.css contains:
@font-face{font-display:swap;font-family:my-font-family;src:url(fonts/font.4fea716b.woff2) format("woff2")}