diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md
index 19657a0a79d..d86127a6ae2 100644
--- a/docs/configure/webpack.md
+++ b/docs/configure/webpack.md
@@ -51,6 +51,70 @@ yarn start-storybook --debug-webpack
yarn build-storybook --debug-webpack
```
+### Bundle splitting
+
+Starting with Storybook 6.4, [bundle splitting](https://v4.webpack.js.org/guides/code-splitting/) is supported through a configuration flag. Update your Storybook configuration and add the `storyStoreV7` flag:
+
+
+
+
+
+
+
+When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./overview.md#on-demand-story-loading).
+
+### Webpack 5
+
+Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the `@storybook/builder-webpack5` package, and opting in in your `main.js`:
+
+
+
+
+
+
+
+Once you are using Webpack 5, you can further opt into some features to optimize your build:
+
+#### Lazy Compilation
+
+Storybook supports Webpack's experimental [lazy compilation](https://webpack.js.org/configuration/experiments/#experimentslazycompilation) feature, via the `lazyCompilation` builder flag:
+
+
+
+
+
+
+
+This feature applies in development mode, and will mean your Storybook will start up faster, at the cost of slightly slower browsing time when you change stories.
+
+#### Filesystem Caching
+
+Storybook supports Webpack's [filesystem caching](https://webpack.js.org/configuration/cache/#cachetype) feature, via the `fsCache` builder flag:
+
+
+
+
+
+
+
+This feature will mean build output is cached between runs of Storybook, speeding up subsequent startup times.
+
### Extending Storybook’s webpack config
To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./overview.md#configure-story-rendering).
@@ -112,22 +176,6 @@ The following code snippet shows how you can replace the loaders from Storybook
💡 Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., /projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
-### Bundle splitting
-
-Starting with Storybook 6.4, [bundle splitting](https://v4.webpack.js.org/guides/code-splitting/) is supported through a configuration flag. Update your Storybook configuration and add the `storyStoreV7` flag:
-
-
-
-
-
-
-
-When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./overview.md#on-demand-story-loading).
-
### TypeScript Module Resolution
When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like:
@@ -144,4 +192,4 @@ When working with TypeScript projects, the default Webpack configuration may fai
\ No newline at end of file
+
diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.mdx
new file mode 100644
index 00000000000..622152ccfc4
--- /dev/null
+++ b/docs/snippets/common/storybook-main-webpack5-fsCache.mdx
@@ -0,0 +1,14 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ core: {
+ builder: {
+ name: 'webpack5',
+ options: {
+ fsCache: true,
+ },
+ },
+ },
+};
+```
diff --git a/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx b/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx
new file mode 100644
index 00000000000..2ad512426ea
--- /dev/null
+++ b/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx
@@ -0,0 +1,14 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ core: {
+ builder: {
+ name: 'webpack5',
+ options: {
+ lazyCompilation: true,
+ },
+ },
+ },
+};
+```
diff --git a/docs/snippets/common/storybook-main-webpack5.js.mdx b/docs/snippets/common/storybook-main-webpack5.js.mdx
new file mode 100644
index 00000000000..918c5a12cdd
--- /dev/null
+++ b/docs/snippets/common/storybook-main-webpack5.js.mdx
@@ -0,0 +1,9 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ core: {
+ builder: 'webpack5',
+ },
+};
+```