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

我是整个nodejs / reactjs领域的新手，如果我的问题听起来很傻，我深表歉意。所以我在玩reactabular.js。

每当我执行此操作时，npm start它就会一直运行localhost:8080。

我如何更改它0.0.0.0:8080以使其可以公开访问？我一直在尝试阅读上述回购中的源代码，但未能找到执行此设置的文件。

另外，要补充一点- 80如果可能的话，如何使它在端口上运行？

这样的事情对我有用。我猜这应该为您工作。

使用此命令运行webpack-dev

webpack-dev-server --host 0.0.0.0 --port 80

并在webpack.config.js中进行设置

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

注意如果使用的是热加载，则必须这样做。

使用此命令运行webpack-dev

webpack-dev-server --host 0.0.0.0 --port 80

并在webpack.config.js中进行设置

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]

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

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

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

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

使用以下命令配置webpack（在webpack.config.js中）：

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}

我是JavaScript开发和ReactJS的新手。我无法找到适合我的答案，直到通过查看react-scripts代码找出答案。使用ReactJS 15.4.1+和react-scripts，您可以使用环境变量从自定义主机和/或端口开始：

HOST='0.0.0.0' PORT=8080 npm start

希望这可以帮助像我这样的新来者。

以下为我工作-

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是我的计算机名，所以请用您计算机上的任何名称替换。

如果您在使用'create-react-app'创建的React应用程序中，请转到package.json并进行更改

"start": "react-scripts start",

到...（unix）

"start": "PORT=80 react-scripts start",

或...（赢）

"start": "set PORT=3005 && react-scripts start"

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

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

我在其他一些答案中苦苦挣扎。（我的设置是：在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。

对我来说：更改监听主机有效：

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

已更改为：

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

服务器开始在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。虽然有点蛮力，但是对我有用。

在package.json中，更改“ start”值，如下所示

注意：运行$ sudo npm start，您需要使用sudo在端口80上运行react脚本

对我来说，这段代码行得通。只需将其添加到您的package.json文件中：

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

并通过运行脚本“ build” npm run build

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

PORT=80 npm run dev