局域网使用 webpack-dev-server 访问节点服务器答案

【问题标题】：Local area network visit node server with webpack-dev-server局域网使用 webpack-dev-server 访问节点服务器
【发布时间】：2015-12-19 16:54:21
【问题描述】：

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

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

现在我想从局域网中的另一个客户端访问该应用程序。我可以访问development machine 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() {});

我希望我能在本地开发机上保持live-reloading，其他电脑或手机可以通过development machine IP:3000访问服务器和静态文件

我不熟悉 webpack。我只是按照一些教程来构建开发环境。

我应该如何更改配置？

【问题讨论】：

那么，您使用 Express 在端口 3000 上提供 HTML 文件，使用 webpack-dev-server 在端口 8080 上提供 app.js 文件，对吗？两台服务器都在同一台机器上吗？为什么不用一台服务器提供所有服务？
@dreyescat 因为 webpack-dev-server 就是这样工作的。我尝试了在一台服务器上提供捆绑文件的 webpack-dev-middleware，但热重载对它不起作用，因为由 nodemon 启动的服务器会在文件更改时自动重启。

标签： node.js webpack webpack-dev-server

【解决方案1】：

如果你想接受来自 localhost 以外的其他机器的连接，你需要在你的 server.listen 调用中配置 hostname 参数。在您的情况下，您只是允许"localhost" 上的连接：

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

例如，要接受任何地址上的连接，只需删除该参数：

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

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

【讨论】：

谢谢。但我认为 HTML 文件中的 <script src="http://localhost:8080/public/js/app.js"></script> 仍然存在问题。当我从另一台机器访问服务器时，localhost 代表发送请求的机器而不是服务器，因此我无法访问 js 文件。
如果你只是像这样<script src="public/js/app.js"></script>从script中删除http://localhost:8080/并尝试从端口8080而不是3000加载页面会发生什么？
webpack-dev-server 为内存中的捆绑文件提供服务。磁盘中没有这样的文件，所以我无法从端口 3000 访问它