童话是不是还没有准备好与合作的WebPack 5，但它是在他们的路线图7.0版本。

此GitHub 问题中的更多上下文。

从6.2.0 开始，Storybook 的预览构建器正式兼容 Webpack 5，管理器构建器非正式兼容 Webpack 5。请参阅此构建器和 Webpack 5 兼容性的说明。另请查看此要点/评论部分，其中包含更详细的安装说明。

如果我理解正确，将构建器设置为 Webpack 5（按照这些说明）将强制预览构建器使用 Webpack 5，允许您公开 UI 组件以获得很酷的 Webpack 5 新功能，例如module联合。

但是，如果您还想强制管理器构建器使用 Webpack 5（这样您就可以完成与 Webpack 4 的分手），则需要使用Yarn 选择性依赖项解析。这是我专门做的（在 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 构建给出了这个警告：

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 迁移到 5 的任务之一涉及为 Webpack 4 自动提供的节点包手动提供浏览器 polyfill。可能已经走错了方向。Storybook 开发服务器构建缓存在本地（安装 Storybook 的包）node_modules 目录（whatever-package/node_modules/.cache/storybook/dev-server）中。定期删除 dev-server 子目录可以帮助您调试构建，并可能使您免于构建一长串不必要的节点 polyfill。（我经过惨痛的教训才学到这个）。

话虽如此，对于 Storybook 的干净安装，您实际上可能不需要任何 polyfill。另一方面，有些情况确实需要节点填充（例如@storybook/addon-docs 需要“assert”（见下文））。这是在 main.js 中向 Storybook 的 Webpack 配置添加 polyfill（和插件，如果需要）的一种方法：

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时遇到了节点 polyfill 的严重问题。我一直在......添加......零碎的插件（通过npm的独立包），这似乎没有任何polyfills（@storybook/actions和@storybook/controls是好的oob；@storybook/docs需要断言 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 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 之前最好稍等一下