Ensure no conflicts across other loaders

examples/config-extension-config/extension.config.js

@@ -1,27 +1,20 @@
-/** @type {import('extension-develop').Config} */
+/** @type {import('extension-develop').ConfigFile} */
 module.exports = {
-  dev: {
-    config: (config) => {
+  config: (config) => {
+    config.module.rules.push(
+      {
+        test: /\.svg$/i,
+        type: 'asset',
+        resourceQuery: /url/ // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
+        use: [require.resolve('@svgr/webpack')]
+      }
+    )
 
-      config.module.rules.push({
-          test: /\.svg$/i,
-          issuer: /\.[jt]sx?$/,
-          // exclude react component if *.svg?url
-          resourceQuery: {not: [/url/]},
-          use: [require.resolve('@svgr/webpack')]
-      })
-
-      return config
-    }
-  },
-  preview: {
-    config: (config) => {
-      return config
-    }
-  },
-  build: {
-    config: (config) => {
-      return config
-    }
+    return config
   }
 }

examples/config-extension-config/package.json

@@ -34,4 +34,4 @@
     "@types/react-dom": "^18.0.5",
     "typescript": "5.3.3"
   }
-}
+}

programs/develop/commands/commands-lib/config-types.ts

@@ -0,0 +1,5 @@
+import {Configuration} from 'webpack'
+
+export interface FileConfig {
+  config: (config: Configuration) => Configuration
+}

programs/develop/commands/commands-lib/get-extension-config.ts

@@ -0,0 +1,32 @@
+import fs from 'fs'
+import path from 'path'
+import {Configuration} from 'webpack'
+import {FileConfig} from './config-types'
+import * as messages from './messages'
+
+export function loadExtensionConfig(projectPath: string) {
+  const userConfigPath = path.join(projectPath, 'extension.config.js')
+
+  if (fs.existsSync(userConfigPath)) {
+    if (isUsingExtensionConfig(projectPath)) {
+      const userConfig: FileConfig = require(userConfigPath)
+      if (userConfig && userConfig != null) {
+        if (userConfig && typeof userConfig!.config === 'function') {
+          return userConfig!.config
+        }
+      }
+    }
+  }
+
+  return (config: Configuration) => config
+}
+
+export function isUsingExtensionConfig(projectPath: string) {
+  const configPath = path.join(projectPath, 'extension.config.js')
+  if (fs.existsSync(configPath)) {
+    console.log(messages.isUsingExtensionConfig('extension.config.js'))
+    return true
+  } else {
+    return false
+  }
+}

programs/develop/commands/commands-lib/messages.ts

@@ -377,3 +377,11 @@ function getAssetsTree(assets: StatsAsset[] | undefined): string {
 
   return `.\n${printTree(assetTree)}`
 }
+
+export function isUsingExtensionConfig(integration: any) {
+  return (
+    `${getLoggingPrefix('info')} ` +
+    `is using ${gray(integration)}. ` +
+    `${brightYellow('This is very experimental')}.`
+  )
+}

programs/develop/module.ts

@@ -9,6 +9,7 @@ import {extensionBuild, type BuildOptions} from './commands/build'
 import {extensionDev, type DevOptions} from './commands/dev'
 import {extensionPreview, type PreviewOptions} from './commands/preview'
 import {extensionStart, type StartOptions} from './commands/start'
+import {type FileConfig} from './commands/commands-lib/config-types'
 
 export {
   extensionBuild,
@@ -18,5 +19,6 @@ export {
   extensionStart,
   StartOptions,
   extensionPreview,
-  PreviewOptions
+  PreviewOptions,
+  FileConfig
 }

programs/develop/package.json

@@ -65,6 +65,7 @@
     "tiny-glob": "^0.2.9",
     "webpack": "~5.92.0",
     "webpack-dev-server": "^5.0.2",
+    "webpack-merge": "^6.0.1",
     "webpack-target-webextension": "^1.1.2"
   },
   "devDependencies": {
@@ -84,7 +85,6 @@
   "optionalDependencies": {
     "@babel/core": "^7.24.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@svgr/webpack": "^8.1.0",
     "@vue/compiler-sfc": "^3.4.34",
     "babel-loader": "^9.1.3",
     "babel-preset-modern-browser-extension": "^0.7.0",

programs/develop/plugin-browsers/browsers-lib/messages.ts

@@ -31,7 +31,7 @@ export function capitalizedBrowserName(browser: DevOptions['browser']) {
 }
 
 export function stdoutData(
-  name: string,
+  // name: string,
   browser: DevOptions['browser'],
   mode: DevOptions['mode']
 ) {
@@ -40,7 +40,7 @@ export function stdoutData(
   return (
     `${getLoggingPrefix(browser, 'info')} ` +
     `${capitalizedBrowserName(browser)} ${extensionOutput} ` +
-    `${name} ` +
+    // `${name} ` +
     `running in ${modeColor(mode || 'unknown')} mode.`
   )
 }

programs/develop/plugin-browsers/run-chromium/index.ts

@@ -1,5 +1,4 @@
 import fs from 'fs'
-import path from 'path'
 import {type Compiler} from 'webpack'
 import {spawn} from 'child_process'
 import {browserConfig} from './browser-config'
@@ -89,16 +88,14 @@ export class RunChromiumPlugin {
       }
 
       this.launchChromium(this.browser)
-      const extension = this.extension[0]
-      const extensionManifest = require(path.join(extension, 'manifest.json'))
-
-        console.log(
-          messages.stdoutData(
-            extensionManifest.name,
-            this.browser,
-            compilation.compilation.options.mode
-          )
+
+      console.log(
+        messages.stdoutData(
+          // extensionManifest.name,
+          this.browser,
+          compilation.compilation.options.mode
         )
+      )
 
       chromiumDidLaunch = true
       done()

programs/develop/plugin-browsers/run-firefox/index.ts

@@ -1,5 +1,4 @@
 import fs from 'fs'
-import path from 'path'
 import {exec} from 'child_process'
 import {type Compiler} from 'webpack'
 import {firefoxLocation} from './firefox-location'
@@ -100,12 +99,10 @@ export class RunFirefoxPlugin {
         }
 
         await this.launchFirefox(compiler)
-        const extension = this.extension[0]
-        const extensionManifest = require(path.join(extension, 'manifest.json'))
 
         console.log(
           messages.stdoutData(
-            extensionManifest.name,
+            // extensionManifest.name,
             this.browser,
             compilation.compilation.options.mode
           )

programs/develop/webpack/dev-server.ts

@@ -8,9 +8,11 @@
 import path from 'path'
 import webpack from 'webpack'
 import WebpackDevServer from 'webpack-dev-server'
+import {merge} from 'webpack-merge'
 import webpackConfig from './webpack-config'
 import type {DevOptions} from '../commands/dev'
-import {isUsingJSFramework} from './lib/utils'
+import * as utils from './lib/utils'
+import {loadExtensionConfig} from '../commands/commands-lib/get-extension-config'
 
 function closeAll(devServer: WebpackDevServer) {
   devServer
@@ -27,7 +29,10 @@ export async function devServer(
   projectPath: string,
   {...devOptions}: DevOptions
 ) {
-  const compilerConfig = webpackConfig(projectPath, devOptions)
+  const baseConfig = webpackConfig(projectPath, devOptions)
+  const userExtensionConfig = loadExtensionConfig(projectPath)
+  const userConfig = userExtensionConfig(baseConfig)
+  const compilerConfig = merge(userConfig)
   const compiler = webpack(compilerConfig)
 
   const serverConfig: WebpackDevServer.Configuration = {
@@ -38,7 +43,7 @@ export async function devServer(
     devMiddleware: {
       writeToDisk: true
     },
-    watchFiles: isUsingJSFramework(projectPath)
+    watchFiles: utils.isUsingJSFramework(projectPath)
       ? undefined
       : {
           paths: [path.join(projectPath, '**/*.html')],

programs/develop/webpack/lib/messages.ts

@@ -13,7 +13,7 @@ import {
 import {Manifest} from '../webpack-types'
 import {DevOptions} from '../../commands/dev'
 import {CERTIFICATE_DESTINATION_PATH} from './constants'
-import { Stats } from 'webpack'
+import {Stats} from 'webpack'
 
 type PrefixType = 'warn' | 'info' | 'error' | 'success'
 

programs/develop/webpack/plugin-css/common-style-loaders.ts

@@ -22,9 +22,9 @@ export async function commonStyleLoaders(
     opts.useMiniCssExtractPlugin
       ? miniCssLoader
       : isUsingVue(projectPath)
-        ? 'vue-style-loader'
-        : 'style-loader',
-    'css-loader'
+        ? require.resolve('vue-style-loader')
+        : require.resolve('style-loader'),
+    require.resolve('css-loader')
   ].filter(Boolean)
 
   if (

programs/develop/webpack/plugin-js-frameworks/js-tools/preact.ts

@@ -53,7 +53,6 @@ export async function maybeUsePreact(
     const reactDependencies = [
       'react-refresh',
       '@pmmmwh/react-refresh-webpack-plugin',
-      '@svgr/webpack',
       'react-refresh-typescript'
     ]
     const manifest = require(path.join(projectPath, 'manifest.json'))

programs/develop/webpack/plugin-js-frameworks/js-tools/react.ts

@@ -52,7 +52,6 @@ export async function maybeUseReact(
     const reactDependencies = [
       'react-refresh',
       '@pmmmwh/react-refresh-webpack-plugin',
-      '@svgr/webpack',
       'react-refresh-typescript'
     ]
 

programs/develop/webpack/plugin-reload/steps/create-web-socket-server/web-socket-server/start-server.ts

@@ -49,7 +49,7 @@ export async function startServer(compiler: Compiler, options: DevOptions) {
   let webSocketServer: WebSocket.Server | undefined
 
   if (options.browser === 'firefox') {
-    const {server} = httpsServer(manifestName, options.port as number + 1)
+    const {server} = httpsServer(manifestName, (options.port as number) + 1)
     webSocketServer = new WebSocket.Server({server})
   } else {
     const portInUse = await isPortInUse(options.port as number)

programs/develop/webpack/plugin-static-assets/index.ts

@@ -18,28 +18,36 @@ export class StaticAssetsPlugin {
       return `${folderPath}/[name][ext]`
     }
 
-    const loaders: RuleSetRule[] = [
-      {
-        test: /\.svg$/i,
-        type: 'asset',
-        // *.svg?url
-        resourceQuery: /url/,
-        generator: {
-          filename: () => getAssetFilename('assets')
-        }
+    // Define the default SVG rule
+    const defaultSvgRule: RuleSetRule = {
+      test: /\.svg$/i,
+      type: 'asset/resource',
+      generator: {
+        filename: () => getAssetFilename('assets')
       },
-      {
-        test: /\.svg$/i,
-        issuer: /\.[jt]sx?$/,
-        // exclude react component if *.svg?url
-        resourceQuery: {not: [/url/]},
-        use: ['@svgr/webpack'],
-        generator: {
-          filename: () => getAssetFilename('assets')
+      parser: {
+        dataUrlCondition: {
+          // inline images < 2 KB
+          maxSize: 2 * 1024
         }
-      },
+      }
+    }
+
+    // Check if any existing rule handles SVG files
+    const hasCustomSvgRule = compiler.options.module.rules.some((rule) => {
+      return (
+        (rule as any) &&
+        (rule as any).test instanceof RegExp &&
+        (rule as any).test.test('.svg') &&
+        (rule as any).use !== undefined
+      )
+    })
+
+    const loaders: RuleSetRule[] = [
+      // Only add the default SVG rule if there's no custom SVG rule
+      ...(hasCustomSvgRule ? [] : [defaultSvgRule]),
       {
-        test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
+        test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$/i,
         type: 'asset/resource',
         generator: {
           filename: () => getAssetFilename('assets')
@@ -80,6 +88,7 @@ export class StaticAssetsPlugin {
       }
     ]
 
+    // Combine user rules with default rules, ensuring no conflict for SVGs
     compiler.options.module.rules = [
       ...compiler.options.module.rules,
       ...loaders

programs/develop/webpack/webpack-config.ts

@@ -93,6 +93,9 @@ export default function webpackConfig(
     watchOptions: {
       ignored: /node_modules|dist/
     },
+    module: {
+      rules: []
+    },
     plugins: [
       new CompilationPlugin({
         manifestPath
@@ -153,13 +156,6 @@ export default function webpackConfig(
       all: false,
       errors: true,
       warnings: true
-      // children: true,
-      // errorDetails: true,
-      // entrypoints: false,
-      // colors: true,
-      // assets: false,
-      // chunks: false,
-      // modules: false
     },
     infrastructureLogging: {
       level: 'none'