Repository: wxt-dev/wxt (TypeScript)

Issue:
`outDirTemplate` for customizing output directory
### Feature Request

Add a new config, `outDirTemplate`, that defaults to `{{browser}}-mv{{manifestVersion}}`. Template variables are:

| Template Var | Value |
| --- | --- |
| `{{browser}}` | `wxt.config.browser`
| `{{manifestVersion}}` | `wxt.config.manifestVersion`
| `{{mode}}` | `wxt.config.mode`
| `{{modeSuffix}}` | `""` for production, `"-dev"` for development, and `"-{{mode}}"` for all others
| `{{command}}` | `wxt.config.command`

If anyone else has other ideas for what template variables might be useful, feel free to leave a comment.

The default template should be `{{browser}}-mv{{manifestVersion}}` to prevent breaking changes. Will consider changing the default to `{{browser}}-mv{{manifestVersion}}{{modeSuffix}}` in the next major version.

#### Is your feature request related to a bug?

N/A

### What are the alternatives?

Use a hook/module to modify the config directly:

```ts
// wxt.config.ts
import { defineConfig } from "wxt";
import path from 'node:path';

defineConfig({
  hooks: {
    ready(wxt) {
      wxt.config.outBaseDir = path.resolve("build");
      wxt.config.outDir = path.joing(wxt.config.outBaseDir, `${wxt.config.browser}-mv${wxt.config.manifestVersion}-${wxt.config.mode}`);
    },
  },
});
```

### Additional context

- https://discord.com/channels/1212416027611365476/1294600321246695474/1294600321246695474




Fix (patch):
diff --git a/packages/wxt/src/core/resolve-config.ts b/packages/wxt/src/core/resolve-config.ts
index 8269179ca..5c2b9cd9d 100644
--- a/packages/wxt/src/core/resolve-config.ts
+++ b/packages/wxt/src/core/resolve-config.ts
@@ -96,7 +96,21 @@ export async function resolveConfig(
   const publicDir = path.resolve(srcDir, mergedConfig.publicDir ?? 'public');
   const typesDir = path.resolve(wxtDir, 'types');
   const outBaseDir = path.resolve(root, mergedConfig.outDir ?? '.output');
-  const outDir = path.resolve(outBaseDir, `${browser}-mv${manifestVersion}`);
+  const modeSuffixes: Record<string, string | undefined> = {
+    production: '',
+    development: '-dev',
+  };
+  const outDirTemplate = (
+    mergedConfig.outDirTemplate ?? `${browser}-mv${manifestVersion}`
+  )
+    // Resolve all variables in the template
+    .replaceAll('{{browser}}', browser)
+    .replaceAll('{{manifestVersion}}', manifestVersion.toString())
+    .replaceAll('{{modeSuffix}}', modeSuffixes[mode] ?? `-${mode}`)
+    .replaceAll('{{mode}}', mode)
+    .replaceAll('{{command}}', command);
+
+  const outDir = path.resolve(outBaseDir, outDirTemplate);
   const reloadCommand = mergedConfig.dev?.reloadCommand ?? 'Alt+R';
 
   const runnerConfig = await loadConfig<ExtensionRunnerConfig>({
diff --git a/packages/wxt/src/types.ts b/packages/wxt/src/types.ts
index 445f04476..4041f0b06 100644
--- a/packages/wxt/src/types.ts
+++ b/packages/wxt/src/types.ts
@@ -53,6 +53,19 @@ export interface InlineConfig {
    * @default ".output"
    */
   outDir?: string;
+  /**
+   * Template string for customizing the output directory structure.
+   * Available variables:
+   * - <span v-pre>`{{browser}}`</span>: The target browser (e.g., 'chrome', 'firefox')
+   * - <span v-pre>`{{manifestVersion}}`</span>: The manifest version (e.g., 2 or 3)
+   * - <span v-pre>`{{mode}}`</span>: The build mode (e.g., 'development', 'production')
+   * - <span v-pre>`{{modeSuffix}}`</span>: A suffix based on the mode ('-dev' for development, '' for production)
+   * - <span v-pre>`{{command}}`</span>: The WXT command being run (e.g., 'build', 'serve')
+   *
+   * @example "{{browser}}-mv{{manifestVersion}}{{modeSuffix}}"
+   * @default <span v-pre>`"{{browser}}-mv{{manifestVersion}}"`</span>
+   */
+  outDirTemplate?: string;
   /**
    * > Only available when using the JS API. Not available in `wxt.config.ts` files
    *
@@ -62,7 +75,7 @@ export interface InlineConfig {
    */
   configFile?: string | false;
   /**
-   * Set to `true` to show debug logs. Overriden by the command line `--debug` option.
+   * Set to `true` to show debug logs. Overridden by the command line `--debug` option.
    *
    * @default false
    */
@@ -1234,7 +1247,7 @@ export interface Wxt {
    */
   pm: WxtPackageManager;
   /**
-   * If the dev server was started, it will be availble.
+   * If the dev server was started, it will be available.
    */
   server?: WxtDevServer;
   /**