修改Storybook managerWebpack的devServer配置不生效如何解决

配置不生效的核心原因是用错了配置项：

• managerWebpack 仅负责Storybook管理器UI（侧边栏、顶部工具栏等外壳部分）的构建编译，完全不接管开发服务器的运行逻辑，写在这个配置函数里的devServer相关内容会被直接忽略，根本不会被开发服务读取。
• Storybook的webpack5 builder不会从managerWebpack、webpackFinal返回的webpack配置对象中读取devServer配置，同时它自身控制浏览器自动打开的逻辑也独立于webpack devServer的open字段，在webpack配置里写open:false自然不会生效。

分两步调整即可：

1. 关闭默认自动打开浏览器
   这个行为由Storybook CLI直接控制，最稳妥的方式是在启动命令上添加--no-open参数，修改package.json中的脚本即可：

{
  "scripts": {
    "storybook": "start-storybook -p 6006 --no-open"
  }
}

2. 配置launch-editor-middleware中间件
   devServer相关配置要直接写在.storybook/main.js的顶层导出字段中，builder会自动识别合并，删掉之前写在managerWebpack里的devServer相关内容，调整后的配置参考：

const openInEditor = require('launch-editor-middleware');

module.exports = {
  core: {
    builder: '@storybook/builder-webpack5',
  },
  // 其余原有配置保持不变
  // 顶层新增devServer配置，这才是builder识别的合法配置位置
  devServer: {
    onBeforeSetupMiddleware(devServer) {
      devServer.app.use('/__open-in-editor', openInEditor());
    },
  },
  managerWebpack: async (config, options) => {
    // 这里仅保留针对管理器UI构建的修改逻辑，不要放devServer相关内容
    return config;
  }
  // 其余原有配置保持不变
}

• 所有devServer相关的配置（代理、中间件、静态资源路由等）都要放在main.js顶层的devServer字段下，不要嵌套在任何webpack配置修改函数里。
• 配置修改完成后完全重启Storybook服务即可生效，可通过访问http://localhost:你的服务端口/__open-in-editor?file=项目内任意文件相对路径验证中间件是否正常唤起编辑器。

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