title: Local area network visit node server with webpack-dev-server
body: <p>I build a app with Express, React and Webpack. I used webpack-dev-server and react-hot-loader to live-loding.</p>
  
  <p>The Express server is on port 3000 and the webpack-dev-server servers files on <code>localhost:8080</code>. </p>
  
  <p>Now I want to visit the app from another client in the local area network. I can visit the <code>development machine IP:3000</code>, but can not access the <code>localhost:8080</code></p>
  
  <p>My <code>webpack.config.dev.js</code> file is: </p>
  
  <pre><code>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/
          }, ]
      }
  }
  </code></pre>
  
  <p>and the HTML is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
    &lt;link rel="stylesheet" href="public/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;{{ content|safe }}&lt;/div&gt;
    &lt;script src="http://localhost:8080/public/js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the webpack-dev-server is</p>
  
  <pre><code>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() {});
  </code></pre>
  
  <p>I hope I can keep live-reloading on my local development machine and other computer or mobile phone can access the server and static files via <code>development machine IP:3000</code></p>
  
  <p>I am not familiar with webpack. I just followed some tutorials to build the development environment.</p>
  
  <p>How should I change the config?</p>