升级到 Webpack 5 打破 Storybook 5

Question

在将 webpack 4/storybook 5 项目升级到 webpack 5 的过程中，希望能够利用联合模块。我经常在webpack --config webpack.config.js建筑工作中遇到一些困难，但我似乎无法克服这个故事书配置问题来使其正常工作。故事书 webpack.config.js 中没有很多 - 只是一些用于测试较少文件和使用适当加载器的模块规则。在升级 webpack 专业时，我遇到的错误似乎是典型的，因为我发现很多人遇到了从 3 到 4 相同的事情，但到目前为止我尝试过的任何事情都失败了。具体的堆栈跟踪是：

Cannot read property 'tapAsync' of undefined
    at ExternalModuleFactoryPlugin.apply (/Users/tbullard/Workspace/unify/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:29:39)
    at compiler.hooks.compile.tap (/Users/tbullard/Workspace/unify/node_modules/webpack/lib/ExternalsPlugin.js:24:63)
    at SyncHook.eval [as call] (eval at create (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.beforeCompile.callAsync.err (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:665:23)
    at _err0 (eval at create (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at compiler.inputFileSystem.readFile (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/webpack/lib/DllReferencePlugin.js:72:15)
    at process.nextTick (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)

让我相信有插件不兼容？？？蒂亚！

Answer 1

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

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

但是，如果您还想强制管理器构建器使用 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 升级到 Webpack 5 时手动提供大量 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 的独立包），这似乎不需要任何腻子就能工作（@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'),
                },
              },
            ],
          },
        ],
      },

希望这能让你起步

Answer 2

Storybook尚未准备好与Webpack 5 一起使用，但它已在他们的7.0 版路线图上。

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