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

Question

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

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

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 和一个本地主机证书（在 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')),
   },
},

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

webpack-dev-server: auto reload for tampermonkey script

javascript

webpack

webpack-dev-server

tampermonkey