ReactJS+Webpack+Babel开发Hello-World应用启动遇WDS断开及CSP错误求助

看起来你碰到了两个关联的问题：Webpack Dev Server（WDS）断开连接，以及内容安全策略（CSP）阻止了必要资源的加载。我来帮你一步步解决：

一、先修复CSP样式加载限制问题 #

CSP的style-src规则阻止了semantic UI的CDN样式和WDS热加载时的blob资源，这大概率也是导致WDS断开的核心原因之一。你可以通过两种方式调整CSP：

1. 如果是在index.html中通过meta标签设置CSP #

找到页面中的CSP meta标签，修改style-src指令，添加允许的资源源：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  style-src 'self' http://cdnjs.cloudflare.com/ajax/libs 'unsafe-inline' blob:;
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  img-src 'self' data:;
">

• http://cdnjs.cloudflare.com/ajax/libs：允许加载semantic UI的CDN样式文件
• blob:：允许WDS热加载时注入的blob格式样式资源
• 'unsafe-inline'：开发环境下暂时允许内联样式（生产环境建议用nonce或hash替代，不过开发阶段先保证功能正常）

2. 如果是通过Webpack Dev Server配置CSP #

在你的webpack.config.js的devServer字段中添加CSP响应头：

module.exports = {
  // ...其他Webpack配置
  devServer: {
    hot: true, // 确保热重载功能开启
    client: {
      reconnect: 5, // 配置自动重连次数，缓解WDS断开问题
      logging: 'info',
    },
    headers: {
      'Content-Security-Policy': "default-src 'self'; style-src 'self' http://cdnjs.cloudflare.com/ajax/libs 'unsafe-inline' blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:;"
    }
  }
}

二、彻底解决WDS Disconnected问题 #

除了CSP的影响，你还可以检查以下几点：

• 确认版本兼容：如果用的是Webpack 5，确保安装的是webpack-dev-server@4.x版本；Webpack 4对应webpack-dev-server@3.x，版本不匹配很容易导致连接异常
• 检查启动脚本：在package.json中确认start脚本是否正确：

  "scripts": {
    "start": "webpack serve --mode development" // Webpack 5用这个；Webpack 4用"webpack-dev-server --mode development"
  }
  

• 清除缓存重装依赖：删除node_modules、yarn.lock，然后重新运行yarn install，避免依赖版本冲突导致的隐性问题

完成以上调整后，重新运行yarn start，应该就能正常加载资源且WDS保持稳定连接了。

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