设置 webpack 以通过 HTTPS 在自定义域上本地运行

Posted 2023-02-25

【中文标题】设置 webpack 以通过 HTTPS 在自定义域上本地运行

【英文标题】：Set up webpack to run locally on a custom domain over HTTPS

【发布时间】：2015-09-20 09:56:56

【问题描述】：

为了使用我想集成到我的应用程序中的模块（我正在本地开发），我必须做两件事： 1) 让我的应用程序在 HTTPS 上本地运行。 2) 使用特定域运行应用程序。

使用我用于本地开发的 Webpack 开发服务器，这两件事都应该很容易，但由于某种原因，它并没有像文档建议的那样工作。

我的webpack.config 文件是：

module.exports = 
  entry: './app/js/app.js',
  output: 
    path:'./app/js/',
    publicPath: 'https://specialurl.com/assets',
    filename:'bundle.js'
 

我指向的路径已添加到我计算机上的 hosts 文件中，因此它应该与 localhost 默认值一样有效。

我的package.json 文件有这个，因为它是开发服务器的启动脚本：

"scripts": 
"start": "webpack-dev-server --progress --colors --https",

我进行了这些更改，然后在保存后使用 npm start 重新启动。问题是服务器仍然没有在 https 上运行，当我将浏览器指向新链接时，它什么也没有显示。我发现的所有文档都表明这应该可以工作，所以我一定遗漏了一些明显的东西。

【问题讨论】：

为什么不在 webpack 前面放一个 nginx 服务器，设置证书，然后编辑你的 hosts 文件以将域指向 nginx？

因为看起来 webpack 具有所需的所有功能，所以我希望尽可能简化事情。如果不是这样，尝试一下似乎是个好主意:)

只是说 - 使用 Node 服务器非常容易，即使在开发中我也更喜欢它，因为它更具可扩展性和灵活性

【参考方案1】：

要使用热模块重新加载，请将public 值设置为undefined，然后它将使用host 中的值。

environment.config.devServer.public = undefined
environment.config.devServer.host = 'localhost.example.com'
environment.config.devServer.https = 
  https: true,
  hot: true,
  key: fs.readFileSync(path.resolve('ssl/localhost.example.com.key.pem')),
  cert: fs.readFileSync(path.resolve('ssl/localhost.example.com.cert.pem')),

这是因为这一行，如果定义了public，它会忽略指定的主机： https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/createDomain.js#L16

【参考方案2】：

解决了！事实证明，正如我所料，使用 Webpack 非常容易，但文档有点混乱。

您只需编辑您的主机文件以包含您想要的域，然后将以下代码添加到您的webpack.config：

 devServer: 
  host: "localhost.specialurl.com",
  port: 1234,
  https: true
,

运行npm start 并将您的浏览器指向https://localhost.specialurl.com:1234/webpack-dev-server，您应该一切就绪:)

【讨论】：

运气好可以与hot:true一起工作吗？该应用程序在自定义域上运行，但 webpack 不断尝试打开与 localhost:3000 的 socket.io 连接。

您是如何编辑您的主机文件的？ 127.0.0.1 localhost.specialurl.com ?

是的，必须添加 127.0.0.1 localhost.specialurl.com 才能使其正常工作

你也可以127.0.0.1 localhost localhost.specialurl.com 让本地主机也继续工作。

将 127.0.0.1 localhost localhost.specialurl.com 添加到我的 Windows 主机文件有效。另一种方法是，如果您可以控制域，则可以将 A 记录添加到域并将 localhost.specialurl.com 指向 IP 地址 127.0.0.1。例如，如果你 ping localhost.huawei.com，它会解析为 127.0.0.1。