如何使webpack开发服务器在端口80和0.0.0.0上运行以使其可公开访问？

我尝试了上面的解决方案，但是没有运气。我在项目的package.json中注意到这一行：

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

}，

我看了看，bin/webpack-dev-server.js发现这一行：

.describe("port", "The port").default("port", 8080)

我将端口更改为3000。虽然有点蛮力，但是对我有用。

我试图这样做以轻松使用另一个端口：

PORT=80 npm run dev

我在其他一些答案中苦苦挣扎。（我的设置是：在Windows下的Ubuntu 18.04 virtualbox上npm run dev创建我的项目后，我正在使用webpack 3.12.0 运行vue init webpack。我已将vagrant配置为将端口3000转发到主机。）

• 不幸的是，放置npm run dev --host 0.0.0.0 --port 3000不起作用--它仍然在localhost：8080上运行。
• 此外，文件webpack.config.js不存在，创建文件也无济于事。
• 然后，我发现配置文件现在位于build/webpack.dev.conf.js（和build/webpack.base.conf.js和build/webpack.prod.conf.js）中。但是，修改这些文件似乎不是一个好主意，因为它们实际上是从读取HOST和PORT的process.env。

因此，我搜索了如何设置process.env变量并通过运行以下命令获得成功：

HOST=0.0.0.0 PORT=3000 npm run dev

完成此操作后，我最终得到“您的应用程序正在这里运行：http: //0.0.0.0 : 3000 ”，并且最终可以通过localhost:3000从主机浏览到来看到它。

编辑：找到另一种方法是通过在中编辑dev主机和端口config/index.js。

以下在JSON配置文件中为我工作：

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

以下为我工作-

1）在其中Package.json添加：

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2）在webpack.config.js导出的配置对象下添加以下内容：

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3）现在在终端上输入： npm run dev

4）＃3编译完成后，只需转到浏览器并输入地址为 http://GACDTL001SS369k:8080/

希望您的应用现在应该可以使用外部URL，其他人可以在同一网络上访问该URL。

PS：GACDTL001SS369k是我的计算机名，所以请用您计算机上的任何名称替换。

这就是我的操作方式，它似乎运行得很好。

在webpack.config.js文件中，添加以下内容：

devServer: {
    inline:true,
    port: 8008
  },

显然，您可以使用不与其他端口冲突的任何端口。我提到冲突问题仅是因为我花了大约4个小时。解决问题只是发现我的服务在同一端口上运行。