Webpack: reorganize module assets rules

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' ],
 };
 

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]',
+  },
+}];

webpack/rules/file.js

@@ -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]',
-  },
-};

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,