webpack-dev-server：tampermonkey 脚本的自动重新加载答案

【问题标题】：webpack-dev-server: auto reload for tampermonkey scriptwebpack-dev-server：tampermonkey 脚本的自动重新加载
【发布时间】：2020-08-23 18:12:01
【问题描述】：

我正在尝试让webpack-dev-server 自动重新加载我正在编写的脚本，以便使用webpack-userscript 插件在 Tampermonkey 中作为用户脚本运行。我怀疑问题是脚本确实在外部网站而不是本地主机上运行，所以我不知道这是否可能。

我观察到脚本正在尝试向https://<external website host>:8080/sockjs-node/ 而不是ws://localhost:8080/sockjs-node 发出请求。我尝试在 dev-server 配置中使用代理，但它不起作用，我不确定这是否真的是正确的方法。

devServer: {
   contentBase: path.join(__dirname, 'dist'),
   proxy: {
      '/sockjs-node': {
         target: 'ws://localhost:8080',
         secure: false,
         ws: true,
      },
   },
},

我在设置代理后观察到的一件事，请求从 https://<external website host>:8080/sockjs-node/ 更改为 https://localhost:8080/sockjs-node/，现在即使我删除了代理，它仍继续请求 https://localhost:8080/sockjs-node/。

【问题讨论】：

标签： javascript webpack webpack-dev-server tampermonkey

【解决方案1】：

经过反复试验，我找到了解决方案。问题是外部站点是通过 https 提供的，并且浏览器会阻止这些站点的不安全套接字连接。

所以我不得不将开发服务器也配置为使用 https，但默认的自签名证书是不够的。根据this comment，我使用 mkcert 为 localhost 创建了根 CA 和证书（在 Windows 上，我必须手动将根 CA 添加到浏览器的证书存储中），然后配置很简单：

devServer: {
   contentBase: path.join(__dirname, 'dist'),
   disableHostCheck: true,
   https: {
      key: readFileSync(path.resolve('../../localhost-key.pem')),
      cert: readFileSync(path.resolve('../../localhost.pem')),
      ca: readFileSync(path.join(os.homedir(), 'AppData/Local/mkcert/rootCA.pem')),
   },
},

【讨论】：