升级到《Webpack 5突破故事书5》

Question

在将webpack 4/故事书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)

让我相信有一个插件不兼容‍♂️TIA！

Answer 1

Storybook还没有准备好与Webpack 5合作，但已经在他们的roadmap for version 7.0上了。

此GitHub issue中的更多上下文。

Answer 2

截至6.2.0，Storybook的预览构建器正式兼容Webpack 5，而管理器构建器非正式兼容Webpack 5。见this explanation的构建器和Webpack 5的兼容性。另外，请查看this gist/comments section，了解更详细的安装说明。

如果我理解正确的话，将构建器设置为Webpack 5(根据这些说明)将强制预览构建器使用Webpack 5，从而允许您公开UI组件以使用很酷的新功能，如module federation。

但是，如果您还想强制管理器构建器使用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迁移到5的任务之一是手动为节点包提供浏览器多填充，这些包是由Webpack 4自动提供的。我想要指出的是，如果您在将Storybook升级到Webpack 5时发现自己手动提供了大量的多填充，那么您可能已经走错了方向。Storybook dev-server构建被缓存在本地(到安装Storybook的软件包中)的node_modules目录(whatever-package/node_modules/.cache/storybook/dev-server).中定期删除dev-server子目录可以帮助您调试构建，并有可能避免构建不必要的节点多填充的长长列表。(这一点我学得很辛苦)。

也就是说，对于干净的Storybook安装，您实际上可能不需要任何polyfills。另一方面，某些情况下确实需要节点polyfills (例如，@storybook/addon-docs需要"assert“(见下文))。这里有一种方法可以在main.js中将polyfills (如果你愿意，还有插件)添加到Storybook的Webpack配置中：

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/'),
        },
      },
    };
  },
};

Re: addons，当我尝试使用addon-essentials时，我遇到了严重的节点多边形填充问题。我一直..。正在添加...插件是分段的(通过npm的独立包)，这似乎不需要任何polyfill (@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,
}); 

我还想指出的是，向Webpack config.module.rules添加sass-loader的效果与预期不谋而合。有些人在running into problems上预置了一些童话书和Webpack 5。下面是适当的童话书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 3

这也发生在我身上，最后我解决了这个问题，为故事书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之前最好等一等