从6.2.0开始，Storybook的预览版构建器正式兼容Webpack 5，而管理器构建器则非正式兼容Webpack 5。请参阅构建器的this explanation和Webpack 5兼容性。也可以查看要点/注解部分，了解更详细的安装说明。
如果我理解正确的话，将构建器设置为Webpack 5（按照这些说明）将强制 preview 构建器使用Webpack 5，从而允许您为module federation等很酷的新Webpack 5特性公开UI组件。
但是，如果您还想强制 manager 构建器使用Webpack 5（这样您就可以完成与Webpack 4的拆分），则需要使用Yarn selective dependency resolutions。下面是我具体做的（在package.json中）：

"resolutions": {
    "webpack": "^5.27.2",
    "css-loader": "^5.0.1",
    "dotenv-webpack": "^7.0.2",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2"
  }

在这些分辨率下，Yarn检测到Webpack 4不再使用并将其删除。SB构建版本给出this warning：

info @storybook/react v6.2.0-rc.10
info 
info => Loading presets
WARN Unexpected webpack version in manager-builder
WARN - Received: 5.27.2
WARN - Expected: 4.x

从Webpack 4迁移到Webpack 5的任务之一是为节点包手动提供浏览器多边形填充，而这些节点包是由Webpack 4自动提供的。我想指出的是，如果您发现自己在将Storybook升级到Webpack 5时手动提供了大量多边形填充，你可能走错了方向。Storybook开发者服务器版本缓存在本地node_modules目录（whatever-package/node_modules/.cache/storybook/dev-server）定期删除dev-server子目录可以帮助你调试你的构建，并可能使你免于构建一长串不必要的节点多边形填充。
也就是说，对于一个干净的Storybook安装，你可能实际上不需要任何polyfill。另一方面，有些情况下确实需要节点polyfill（例如@storybook/addon-docs需要“assert”（见下文））。下面是一种将polyfill（和addons，如果你愿意）添加到Storybook的Webpack配置文件main.js中的方法：

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../whatever/src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-controls',
    '@storybook/addon-docs',
  ],
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.fallback,
          assert: require.resolve('assert-browserify/'),
        },
      },
    };
  },
};

回复：插件，我在尝试使用addon-essentials时遇到了节点多边形填充的严重问题。我一直在......添加......插件（通过npm的独立包），似乎没有任何多边形填充也能工作（@storybook/actions和@storybook/controls是很好的oob;@storybook/docs需要assert polyfill（见上图），@storybook/addons也可以很好地在manager.ts中使用主题化---也就是说：

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

我还想指出的是，将sass-loader添加到Webpack config.module.rules中可以按预期工作。有些人在Storybook和Webpack 5的一些scss预设中遇到了问题。以下是Sass的适当Storybook Webpack配置的相关部分：

module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          {
            test: /\.(scss)$/,
            use: [
              {
                loader: 'style-loader',
              },
              {
                loader: 'css-loader',
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: function () {
                      return [require('precss'), require('autoprefixer')];
                    },
                  },
                },
              },
              {
                loader: require.resolve('sass-loader'),
                options: {
                  // using sass (Dart) instead of node-sass because node-sass (Javascript) cannot resolve Yarn 2's Plug'N'Play synthetic node_modules directory
                  // Evidently, sass is a bit slower to compile than node-sass, but I think I prefer sass anyway for latest features (such as @use)
                  implementation: require('sass'),
                },
              },
            ],
          },
        ],
      },

希望这能让你离开地面🛫

Storybook还没有 * 准备好Webpack 5，但它在他们的roadmap for version 7.0上。
本GitHub issue中的更多内容。

我也遇到过这种情况，最后我解决了它，设置了storybook webpack5的依赖项，但使用了webpack4：

"@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-controls": "^6.2.9",
    "@storybook/addon-storysource": "^6.2.9",
    "@storybook/builder-webpack5": "^6.2.9",
    "@storybook/vue": "^6.2.9",

正如我在这里读到的：https://stackoverflow.com/a/67075112/5384339我认为在使用webpack5之前最好稍等一下

正在将故事书v6中的webpack v4升级到v5。请查看下面的链接以获取详细说明。
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

"@storybook/builder-webpack5": "^6.5.15",
   "@storybook/manager-webpack5": "^6.5.15",