using my boilerplate yuh

webpack/loaders/index.ts

@@ -0,0 +1,52 @@
+import { RuleSetRule } from 'webpack';
+import * as styleLoaders from './styleLoaders';
+
+/** using esbuild-loader for ⚡ fast builds */
+const typescriptLoader: RuleSetRule = {
+    test: /\.tsx?$/,
+    loader: 'esbuild-loader',
+    options: {
+        loader: 'tsx',
+        target: 'es2021',
+    },
+};
+
+/** convert svgs to react components automatically */
+const svgLoader: RuleSetRule = {
+    test: /\.svg$/,
+    issuer: /\.tsx?$/,
+    loader: '@svgr/webpack',
+};
+
+/** these are files that we want to be able to be loaded into the extension folder instead of imported */
+const urlLoader: RuleSetRule = {
+    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.mp3$/],
+    loader: 'url-loader',
+    options: {
+        limit: '10000',
+        name: 'static/media/[name].[ext]',
+    },
+};
+
+/** these loaders will allow us to use raw css imports, css modules, raw sass imports, and sass modules */
+const { cssLoader, cssModuleLoader, sassLoader, sassModuleLoader } = styleLoaders;
+
+// this is the default file loader, it will be used for any file that doesn't match the other loaders
+const fileLoader: RuleSetRule = {
+    loader: 'file-loader',
+    exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.mp3$/],
+    options: {
+        name: 'static/media/[name].[ext]',
+    },
+};
+
+/** the assembled list of loaders in the order that we want webpack to attempt to use them on modules */
+const loaders: RuleSetRule[] = [
+    typescriptLoader,
+    {
+        // IMPORTANT: if you are adding a new loader, it must come before the file loader
+        oneOf: [svgLoader, urlLoader, cssLoader, cssModuleLoader, sassLoader, sassModuleLoader, fileLoader],
+    },
+];
+
+export default loaders;