gpt4 book ai didi

node.js - 局域网通过webpack-dev-server访问 Node 服务器

转载 作者:太空宇宙 更新时间:2023-11-03 22:32:37 27 4
gpt4 key购买 nike

我使用 Express、React 和 Webpack 构建了一个应用程序。我使用 webpack-dev-server 和 react-hot-loader 来实时加载。

Express 服务器位于端口 3000 上,webpack-dev-server 服务器文件位于 localhost:8080 上。

现在我想从局域网中的另一个客户端访问该应用程序。我可以访问开发机IP:3000,但是无法访问localhost:8080

我的webpack.config.dev.js文件是:

var webpack = require('webpack');

module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/client/entry',
],
output: {
path: __dirname + '/public/js',
filename: 'app.js',
publicPath: 'http://localhost:8080/public/js',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
"process.env": {
BROWSER: JSON.stringify(true)
}
})
],
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'react-hot',
exclude: /node_modules/
}, {
test: /\.jsx?$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
compact: false
},
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader',
exclude: /node_modules/
}, ]
}
}

HTML 是:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="public/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="app">{{ content|safe }}</div>
<script src="http://localhost:8080/public/js/app.js"></script>
</body>
</html>

webpack-dev-server 是

import WebpackDevServer from "webpack-dev-server";
import webpack from "webpack";
import config from "../../webpack.config.dev";

var server = new WebpackDevServer(webpack(config), {
// webpack-dev-server options
publicPath: config.output.publicPath,
hot: true,
stats: { colors: true },
headers: { "Access-Control-Allow-Origin": "*" }
});

server.listen(8080, "localhost", function() {});

希望我的本地开发机能够保持实时重载,其他电脑或手机可以通过开发机IP:3000访问服务器和静态文件

我对 webpack 不熟悉。我只是按照一些教程搭建了开发环境。

我应该如何更改配置?

最佳答案

如果您想接受来自本地主机以外的其他计算机的连接,您需要在 server.listen 调用中配置 hostname 参数。在您的情况下,您只允许 "localhost" 上的连接:

server.listen(8080, "localhost", function() {});

例如,要接受任何地址上的连接,只需删除该参数即可:

server.listen(8080, function() {});

检查server.listen了解更多信息。

关于node.js - 局域网通过webpack-dev-server访问 Node 服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34368487/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com