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

Question

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

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

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

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

Answer 1

@nishkaush 我必须发表评论供您阅读。所以我确实解决了这个问题(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