使用webpack-dev-server的局域网访问节点服务器
我使用Express，React和Webpack构build了一个应用程序。 我使用了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() {});
我希望我可以在我的本地开发机器上进行实时重新加载，其他电脑或手机可以通过development machine IP:3000访问服务器和静态文件
我不熟悉webpack。 我只是遵循一些教程来构build开发环境。
我应该如何改变configuration？
如果要接受来自其他本地hostname以外的其他机器的连接，则需要在server.listen调用中configurationhostname参数。 在你的情况下，你只是允许"localhost"连接：
server.listen(8080, "localhost", function() {});
例如，要接受任何地址的连接，只需删除该参数：
server.listen(8080, function() {});
检查server.listen的更多信息。