Merge pull request #17707 from storybookjs/docs/webpack-builder-options

Add documentation about WP5 and builder options

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:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-on-demand-story-loading.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+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`:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-webpack5.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+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:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-webpack5-lazyCompilation.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+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:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-webpack5-fsCache.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+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., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions. 
 </div>
 
-### 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:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-on-demand-story-loading.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-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
 
 <div class="aside">
 💡 Learn more about Storybook's <a href="./typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
-</div>
+</div>

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,
+      },
+    },
+  },
+};
+```

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,
+      },
+    },
+  },
+};
+```

docs/snippets/common/storybook-main-webpack5.js.mdx

@@ -0,0 +1,9 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+};
+```