Merge pull request #25656 from storybookjs/docs_webpack_changes_for_a…

…ddons

Docs: Webpack changes for addons

docs/addons/writing-presets.md

@@ -57,7 +57,9 @@ To customize Storybook's Babel configuration and add support for additional feat
 <!-- prettier-ignore-end -->
 
 <Callout variant="info">
+
 The Babel configuration is only applied to frameworks that use Babel internally. If you enable it for a framework that uses a different compiler, like [SWC](https://swc.rs/) or [esbuild](https://esbuild.github.io/), it will be ignored.
+
 </Callout>
 
 ### Builders
@@ -199,6 +201,8 @@ However, if you need, you can also customize the template used by Storybook to r
 
 As Storybook relies on [esbuild](https://esbuild.github.io/) instead of Webpack to build the UI, presets that depend on the `managerWebpack` API to configure the manager or load additional files other than CSS or images will no longer work. We recommend removing it from your preset and adjusting your configuration to convert any additional files to JavaScript.
 
+**Learn more about the Storybook addon ecosystem**
+
 - [Types of addons](./addon-types.md) for other types of addons
 - [Writing addons](./writing-addons.md) for the basics of addon development
 - Presets for preset development

docs/api/main-config-babel-default.md

@@ -26,7 +26,7 @@ To adjust your Storybook's Babel setup directly—not via an addon—use [`babel
 
 ## `Babel.Config`
 
-See [Babel docs](https://babeljs.io/docs/options).
+The options provided by [Babel](https://babeljs.io/docs/options) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon.
 
 ## `Options`
 

docs/api/main-config-babel.md

@@ -27,7 +27,13 @@ Customize Storybook's [Babel](https://babeljs.io/) setup.
 
 ## `Babel.Config`
 
-See [Babel docs](https://babeljs.io/docs/options).
+The options provided by [Babel](https://babeljs.io/docs/options) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon.
+
+<Callout variant="info">
+
+If you have an existing Babel configuration file (e.g., `.babelrc`), it will be automatically detected and used by Storybook without any additional configuration required.
+
+</Callout>
 
 ## `Options`
 

docs/api/main-config-swc.md

@@ -21,7 +21,7 @@ Customize Storybook's [SWC](https://swc.rs/) setup.
 
 ## `SWC.Options`
 
-See SWC's [documentation](https://swc.rs/) for more information.
+The options provided by [SWC](https://swc.rs/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon.
 
 ## Options
 

docs/builders/webpack.md

@@ -107,9 +107,57 @@ Additionally, if you're generating a [static build](../api/cli-options.md#build)
 
 <!-- prettier-ignore-end -->
 
-## What about Webpack 4 support?
+## Compiler support
 
-Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack [website](https://webpack.js.org/migrate/5/) to update your configuration.
+Storybook takes a compiler-agnostic approach to bundling. This allows you to bring your own application bundler (e.g., [Babel](https://babeljs.io/), [SWC](https://swc.rs/)) and ensures compatibility within the vast ecosystem of Webpack 5-based projects.
+
+### SWC
+
+If your project is built using [SWC](https://swc.rs/), use the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon. This addon increases ecosystem compatibility with Webpack 5 projects while maintaining high performance. Run the following command to set up the addon automatically:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-addon-compiler-swc-auto-install.npm.js.mdx',
+    'common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx',
+    'common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<Callout variant="info">
+
+Additional options can be provided to customize the SWC configuration. See the [SWC API documentation](../api/main-config-swc.md) for more information.
+
+</Callout>
+
+When enabled, this addon adjusts the Webpack configuration to use the [`swc-loader`](https://swc.rs/docs/usage/swc-loader) for JavaScript and TypeScript files. Additionally, it will detect and use your project's SWC configuration.
+
+### Babel
+
+If you're working with a project that relies on Babel's tooling to provide support for specific features, including TypeScript or other modern JavaScript features, you can use the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon to allow you to include them in your Storybook to ensure compatibility with your project. Run the following command to set up the addon automatically:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-addon-compiler-babel-auto-install.npm.js.mdx',
+    'common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx',
+    'common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<Callout variant="info">
+
+Additional options can be provided to customize the Babel configuration. See the [`babel` API documentation](../api/main-config-babel.md) for more information, or if you're working on an addon, the [`babelDefault` documentation](../api/main-config-babel-default.md) for more information.
+
+</Callout>
+
+When enabled, the addon will adjust the Webpack configuration to use the [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) as the default loader for JavaScript and TypeScript files. Additionally, it will detect and use your project's Babel configuration.
 
 ## Troubleshooting
 
@@ -145,6 +193,10 @@ However, if you're working with a framework that provides a default aliasing con
 
 As Storybook relies on [esbuild](https://esbuild.github.io/) to build its internal manager, support for bundling assets with the `managerWebpack` will no longer have an impact on the Storybook UI. We recommend removing existing `managerWebpack` configuration elements from your Storybook configuration file and bundling assets other than images or CSS into JavaScript beforehand.
 
+### Storybook doesn't run with Webpack 4
+
+Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack [website](https://webpack.js.org/migrate/5/) to update your configuration.
+
 **Learn more about builders**
 
 - [Vite builder](./vite.md) for bundling with Vite

docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx

@@ -0,0 +1,3 @@
+```sh
+npx storybook@latest add @storybook/addon-webpack5-compiler-babel
+```

docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```sh
+pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
+```

docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx

@@ -0,0 +1,3 @@
+```sh
+yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
+```

docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx

@@ -0,0 +1,3 @@
+```sh
+npx storybook@latest add @storybook/addon-webpack5-compiler-swc
+```

docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```sh
+pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
+```

docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx

@@ -0,0 +1,3 @@
+```sh
+yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
+```