Storybook如何修改webpack配置以正确显示原始source map？

调整方案 #

你可以按照以下步骤修改配置，修复source map映射问题：

1. 替换devtool配置值
   eval-source-map 为了提升构建速度会把source map内嵌到eval语句中，对预编译类代码（JSX/TS/TSX）的原始文件映射支持不佳，替换为cheap-module-source-map即可兼顾构建速度和原始代码映射准确性，生产环境可换成source-map。
2. 开启编译工具的source map生成
   如果项目使用Babel/TypeScript转译代码，需要先在对应配置中开启source map输出，否则webpack侧的devtool配置无法拿到原始文件的映射关系：

• Babel配置（.babelrc/babel.config.js）新增配置：

{
  "sourceMaps": true
}

• TypeScript配置（tsconfig.json）新增配置：

{
  "compilerOptions": {
    "sourceMap": true
  }
}

3. 清理缓存后重启服务
   修改完成后先删除webpack缓存目录node_modules/.cache，再重启Storybook服务，避免旧缓存导致配置不生效。

修改后的完整Storybook配置 #

module.exports = {
  stories: ['../components/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
  webpackFinal: async (config, { configType }) => {
    const file_loader_rule = config.module.rules.find((rule) =>
      rule.test.test('.svg')
    );
    file_loader_rule.exclude = /\.svg$/;
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack', 'url-loader'],
    });
    // 替换devtool配置
    config.devtool = 'cheap-module-source-map';
    return config;
  },
};

如果以上配置仍不生效，可以在启动命令中添加--debug-webpack参数，打印最终的webpack配置确认devtool是否被正确覆盖。

内容的提问来源于stack exchange，提问作者bigpotato