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

Question

为了使用我想集成到我的应用程序中的模块（我在本地开发），我必须做两件事：
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'
 }

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

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

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

我进行了这些更改，然后在保存后使用 npm start 重新启动。问题是服务器仍然没有在 https 上运行ning，当我将浏览器指向新的 link 时，它什么也没显示。我找到的所有文档都使它看起来应该有效，所以我一定遗漏了一些明显的东西。

Answer 1

解决了！事实证明，正如我预期的那样，使用 Webpack 非常非常容易，但是文档有点混乱。

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

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

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

Answer 2

要使其与热模块重新加载一起使用，请将 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

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

Set up webpack to run locally on a custom domain over HTTPS

javascript

localhost

reactjs

webpack

webpack-dev-server

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

Set up webpack to run locally on a custom domain over HTTPS

javascript

localhost

reactjs

webpack

webpack-dev-server

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