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;

webpack/loaders/styleLoaders.ts

@@ -0,0 +1,75 @@
+import { RuleSetRule, RuleSetUseItem } from 'webpack';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';
+
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+function buildStyleLoaders(cssLoaderOptions: Record<string, any>): RuleSetUseItem[] {
+    const loaders = [
+        {
+            loader: MiniCssExtractPlugin.loader,
+        },
+        {
+            loader: 'css-loader',
+            options: { ...cssLoaderOptions, sourceMap: false },
+        },
+    ];
+    return loaders;
+}
+
+export const cssLoader: RuleSetRule = {
+    test: cssRegex,
+    exclude: cssModuleRegex,
+    sideEffects: true,
+    use: [
+        ...buildStyleLoaders({
+            importLoaders: 1,
+            esModule: false,
+        }),
+    ],
+};
+
+export const cssModuleLoader: RuleSetRule = {
+    test: cssModuleRegex,
+    use: [
+        ...buildStyleLoaders({
+            importLoaders: 1,
+            modules: {
+                getLocalIdent: getCSSModuleLocalIdent,
+            },
+        }),
+    ],
+};
+
+export const sassLoader: RuleSetRule = {
+    test: sassRegex,
+    exclude: sassModuleRegex,
+    sideEffects: true,
+    use: [
+        ...buildStyleLoaders({
+            importLoaders: 2,
+        }),
+        {
+            loader: 'sass-loader',
+        },
+    ],
+};
+
+export const sassModuleLoader: RuleSetRule = {
+    test: sassModuleRegex,
+    use: [
+        ...buildStyleLoaders({
+            importLoaders: 2,
+            modules: {
+                getLocalIdent: getCSSModuleLocalIdent,
+            },
+        }),
+        {
+            loader: 'sass-loader',
+        },
+    ],
+};