为什么故事书不使用与项目中相同的 webpack 配置？

Question

我已经使用 storybook 一段时间了，但我仍然无法理解 storybook 有自己的 webpack 配置的原因。

例如，如果我在 tsconfig.json 中配置绝对路径，我必须为故事书做同样的事情。

或者，如果我想为某种文件类型使用加载程序，我必须为故事书再做一次，这有点烦人。

谁能解释一下，或者您在以前的项目中是如何克服这个麻烦的？

Answer 1

我今天遇到了同样的问题。 Storybook 的 webpack 配置使用 SVG-loader 而我的 webpack 配置使用 file-loader.

因此，即使将 SVG 用作 img 的 src 适用于我的项目，但它不适用于 Storybook。

真是气死我了

必须 re-write 我所有使用 img 标签的图标才能使用内联 SVG。浪费了一个下午！

Answer 2

@nishkaush 我必须 post 发表评论供您阅读。所以我确实解决了这个问题（svg 的加载程序），即使它花了我很多时间。感兴趣的可以看看

webpackFinal: async (config) => {
    const fileLoaderRule = config.module.rules.find(
      (rule) => rule.test && rule.test.test('.svg'),
    )
    fileLoaderRule.exclude = /\.svg$/

    config.module.rules.push({
      test: /\.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack'),
    })

    return config
  },

您可以将其放入故事书 webpack 配置中 (main.js)

这是项目 webpack 配置的：

webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    })

    return config
  },

别忘了安装@svgr/webpack

为什么故事书不使用与项目中相同的 webpack 配置？

Why doesn't storybook use the same webpack config as in the project?

reactjs

webpack

storybook