webpack-dev-server：为tampermonkey脚本自动重新加载

Question

我正在尝试使用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/。

Answer 1

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

因此，我必须将开发服务器也配置为也使用https，但是默认的自签名证书还不够。对于this comment，我使用mkcert创建了一个根CA和一个localhost证书（在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')),
   },
},