From e5fd60dbdb50c6703bab5666cc76402e46f76148 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 10 Sep 2021 19:18:51 -0500
Subject: [PATCH] Webpack: reorganize module assets rules

---
 webpack/configuration.js |  1 -
 webpack/rules/assets.js  | 50 ++++++++++++++++++++++++++++++++++++++++
 webpack/rules/file.js    |  9 --------
 webpack/rules/index.js   |  4 ++--
 4 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 webpack/rules/assets.js
 delete mode 100644 webpack/rules/file.js

diff --git a/webpack/configuration.js b/webpack/configuration.js
index 0089469c4..960e25e60 100644
--- a/webpack/configuration.js
+++ b/webpack/configuration.js
@@ -12,7 +12,6 @@ const settings = {
   test_root_path: `${FE_BUILD_DIR}-test`,
   cache_path: 'tmp/cache',
   resolved_paths: [],
-  static_assets_extensions: [ '.jpg', '.jpeg', '.png', '.tiff', '.ico', '.svg', '.gif', '.eot', '.otf', '.ttf', '.woff', '.woff2', '.mp3', '.ogg', '.oga' ],
   extensions: [ '.mjs', '.js', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
 };
 
diff --git a/webpack/rules/assets.js b/webpack/rules/assets.js
new file mode 100644
index 000000000..2c6fb3f0d
--- /dev/null
+++ b/webpack/rules/assets.js
@@ -0,0 +1,50 @@
+// Asset modules
+// https://webpack.js.org/guides/asset-modules/
+
+const { resolve } = require('path');
+
+// These are processed in reverse-order
+// We use the name 'packs' instead of 'assets' for legacy reasons
+module.exports = [{
+  test: /\.(png|svg)/,
+  type: 'asset/resource',
+  include: [
+    resolve('app', 'images'),
+    resolve('node_modules', 'emoji-datasource'),
+  ],
+  generator: {
+    filename: 'packs/images/[name]-[contenthash:8][ext]',
+  },
+}, {
+  test: /\.(ttf|eot|svg|woff|woff2)/,
+  type: 'asset/resource',
+  include: [
+    resolve('app', 'fonts'),
+    resolve('node_modules', 'fork-awesome'),
+    resolve('node_modules', '@fontsource'),
+  ],
+  generator: {
+    filename: 'packs/fonts/[name]-[contenthash:8][ext]',
+  },
+}, {
+  test: /\.(ogg|oga|mp3)/,
+  type: 'asset/resource',
+  include: resolve('app', 'sounds'),
+  generator: {
+    filename: 'packs/sounds/[name]-[contenthash:8][ext]',
+  },
+}, {
+  test: /\.svg$/,
+  type: 'asset/resource',
+  include: resolve('node_modules', 'twemoji'),
+  generator: {
+    filename: 'packs/emoji/[name]-[contenthash:8][ext]',
+  },
+}, {
+  test: /\.svg$/,
+  type: 'asset/resource',
+  include: resolve('node_modules', 'cryptocurrency-icons'),
+  generator: {
+    filename: 'packs/images/crypto/[name]-[contenthash:8][ext]',
+  },
+}];
diff --git a/webpack/rules/file.js b/webpack/rules/file.js
deleted file mode 100644
index 47516e576..000000000
--- a/webpack/rules/file.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const { settings } = require('../configuration');
-
-module.exports = {
-  test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'),
-  type: 'asset/resource',
-  generator: {
-    filename: 'packs/media/[contenthash][ext]',
-  },
-};
diff --git a/webpack/rules/index.js b/webpack/rules/index.js
index 91a4abd19..d3290659e 100644
--- a/webpack/rules/index.js
+++ b/webpack/rules/index.js
@@ -3,14 +3,14 @@ const git = require('./babel-git');
 const gitRefresh = require('./git-refresh');
 const buildConfig = require('./babel-build-config');
 const css = require('./css');
-const file = require('./file');
+const assets = require('./assets');
 const nodeModules = require('./node_modules');
 
 // Webpack loaders are processed in reverse order
 // https://webpack.js.org/concepts/loaders/#loader-features
 // Lastly, process static files using file loader
 module.exports = [
-  file,
+  ...assets,
   css,
   nodeModules,
   babel,