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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31191884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:25:10  来源:igfitidea点击:

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

javascriptlocalhostreactjswebpackwebpack-dev-server

提问by pmcote

In order to use a module I want to integrate into my application (I am developing locally), I have to do two things:
1) Make my application run locally on HTTPS.
2) Run the application with a specific domain.

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

Both of these things should be pretty easy with the Webpack dev server I am using for local development, but for some reason it is not working as the documentation suggests.

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

My webpack.configfile is:

我的webpack.config文件是:

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

The path I am pointing to has been added to my hosts file on my computer, so it should be just as valid as the localhost default.

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

And my package.jsonfile has this as it's start script for the dev server:

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

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

I made these changes and then I restarted with npm start after saving. The problem is that the server is still not running on https, and when I point my browser to the new link, it just shows nothing. All documentation that I have found makes it seem like this should work, so I must be missing something obvious.

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

回答by pmcote

Solved it! Turns out it's very very easy to do with Webpack as I expected, but the documentation is a little confusing.

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

You simply edit your host file to contain the domain you want, and then add the following code to your webpack.config:

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

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

Run npm startand point your browser to https://localhost.specialurl.com:1234/webpack-dev-serverand you should be all set :)

运行npm start并将您的浏览器指向https://localhost.specialurl.com:1234/webpack-dev-server,您应该已经设置好了:)