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

How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

我是整个 nodejs/reactjs 世界的新手,如果我的问题听起来很愚蠢,我深表歉意。所以我在玩 reactabular.js.

每当我执行 npm start 时,它总是 运行 在 localhost:8080 上执行。

如何在 0.0.0.0:8080 上将其更改为 运行 以便公开访问?我一直在尝试阅读上述 repo 中的源代码,但未能找到执行此设置的文件。

此外,要补充一点 - 如果可能的话,我如何在端口 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 您可以使用环境变量从自定义主机 and/or 端口开始:

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 一起工作,其他人可以在同一网络上访问该应用。

PS:GACDTL001SS369k 是我的计算机名称,所以请替换为您机器上的名称。

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

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

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

"start": "react-scripts start",

到 ... (unix)

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

或... (win)

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

我尝试了上面的解决方案,但没有成功。我在项目的 package.json:

中注意到这一行
 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

},

我查看了 bin/webpack-dev-server.js 并找到了这一行:

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

我将端口更改为 3000。有点蛮力的方法,但它对我有用。

我对其他一些答案感到困惑。 (我的设置是:我是 运行 npm run dev,使用 webpack 3.12.0,在 Windows 下的 Ubuntu 18.04 virtualbox 上使用 vue init webpack 创建我的项目后. 我有 vag运行t 配置为转发端口 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.jsbuild/webpack.prod.conf.js)中。但是,修改这些文件看起来并不是一个好主意,因为它们实际上是从 process.env.
  • 读取 HOST 和 PORT

所以我搜索了 how to set process.env variables 并通过 运行 命令获得了成功:

HOST=0.0.0.0 PORT=3000 npm run dev

这样做之后,我终于得到了 "Your application is running here: http://0.0.0.0:3000",我终于可以通过从主机浏览到 localhost:3000 来看到它了。

编辑:找到另一种方法是在 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

我试过这个以轻松使用另一个端口:

PORT=80 npm run dev

对我来说,这段代码有效。只需将其添加到您的 package.json 文件中即可:

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

和 运行 脚本 "build" by 运行ning npm run build