From 467705c7af6be0302caed37ec1fbbe41f331cc61 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 14 Mar 2022 22:59:21 +1100 Subject: [PATCH 1/2] Add documentation about WP5 and builder options --- docs/configure/webpack.md | 82 +++++++++++++++---- .../storybook-main-webpack5-fsCache.mdx | 12 +++ ...ybook-main-webpack5-lazyCompilation.js.mdx | 12 +++ .../common/storybook-main-webpack5.js.mdx | 7 ++ 4 files changed, 96 insertions(+), 17 deletions(-) create mode 100644 docs/snippets/common/storybook-main-webpack5-fsCache.mdx create mode 100644 docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx create mode 100644 docs/snippets/common/storybook-main-webpack5.js.mdx 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
💡 Learn more about Storybook's built-in TypeScript support or see this issue for more information. -
\ 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..837ddd3d26b --- /dev/null +++ b/docs/snippets/common/storybook-main-webpack5-fsCache.mdx @@ -0,0 +1,12 @@ +```js +// .storybook/main.js + +module.exports = { + 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..3aef7ab6f61 --- /dev/null +++ b/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx @@ -0,0 +1,12 @@ +```js +// .storybook/main.js + +module.exports = { + 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..56006d2ffae --- /dev/null +++ b/docs/snippets/common/storybook-main-webpack5.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js + +module.exports = { + builder: 'webpack5', +}; +``` From 91926f05e71a9ae994987bc2ec101c800827f32c Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 14 Mar 2022 23:10:24 +1100 Subject: [PATCH 2/2] Fix issue with key name --- .../common/storybook-main-webpack5-fsCache.mdx | 10 ++++++---- .../storybook-main-webpack5-lazyCompilation.js.mdx | 10 ++++++---- docs/snippets/common/storybook-main-webpack5.js.mdx | 4 +++- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.mdx index 837ddd3d26b..622152ccfc4 100644 --- a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx +++ b/docs/snippets/common/storybook-main-webpack5-fsCache.mdx @@ -2,10 +2,12 @@ // .storybook/main.js module.exports = { - builder: { - name: 'webpack5', - options: { - fsCache: true, + 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 index 3aef7ab6f61..2ad512426ea 100644 --- a/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx +++ b/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx @@ -2,10 +2,12 @@ // .storybook/main.js module.exports = { - builder: { - name: 'webpack5', - options: { - lazyCompilation: true, + 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 index 56006d2ffae..918c5a12cdd 100644 --- a/docs/snippets/common/storybook-main-webpack5.js.mdx +++ b/docs/snippets/common/storybook-main-webpack5.js.mdx @@ -2,6 +2,8 @@ // .storybook/main.js module.exports = { - builder: 'webpack5', + core: { + builder: 'webpack5', + }, }; ```