title: Why does my Webpack-Dev-Server with BrowserSync external host points to the localhost?
body: <p>I am trying to use BrowserSync through Webpack with Webpack-Dev-Server, and my intention is to get BrowserSync to show my website on my mobile phone as well and keep it in sync with the changes from my browser on the localhost.</p>
  
  <p><strong>This is the webpack output in the console</strong></p>
  
  <pre><code>&gt; webpack-dev-server --watch --mode development
  
  i ?wds?: Project is running at http://localhost:8080/
  i ?wds?: webpack output is served from /
  i ?wdm?: Hash: 27c2e094f54179577245
  Version: webpack 4.29.5
  Time: 2658ms
         Asset      Size  Chunks             Chunk Names
  ./index.html  7.47 KiB          [emitted]
      main.css  38 bytes    main  [emitted]  main
       main.js   700 KiB    main  [emitted]  main
  Entrypoint main = main.css main.js
  i ?wdm?: Compiled successfully.
  [Browsersync] Proxying: http://localhost:8080
  [Browsersync] Access URLs:
   -------------------------------------
         Local: http://localhost:3000
      External: http://86.190.13.18:3000
   -------------------------------------
            UI: http://localhost:3001
   UI External: http://localhost:3001
   -------------------------------------
  </code></pre>
  
  <p><strong>This is what I have so far:</strong></p>
  
  <p>package.json      </p>
  
  <pre><code>    {
            "name": "webpack_2019",
            "version": "1.0.0",
            "description": "",
            "main": "index.js",
            "scripts": {
              "start": "webpack-dev-server --watch --mode development",
              "build": "webpack --mode production"
            },
            "keywords": [],
            "author": "",
            "license": "ISC",
            "devDependencies": {
              "@babel/core": "^7.3.3",
              "@babel/preset-env": "^7.3.1",
              "babel-loader": "^8.0.5",
              "browser-sync": "^2.26.3",
              "browser-sync-webpack-plugin": "^2.2.2",
              "css-loader": "^2.1.0",
              "error-overlay-webpack-plugin": "^0.1.6",
              "html-loader": "^0.5.5",
              "html-webpack-plugin": "^3.2.0",
              "mini-css-extract-plugin": "^0.5.0",
              "webpack": "^4.29.5",
              "webpack-cli": "^3.2.3",
              "webpack-dev-server": "^3.2.0"
            }
          }
  
  webpack.config.js
  
  const HtmlWebPackPlugin = require("html-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");
  const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  
  module.exports = {
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: "babel-loader"
                  }
              },
              {
                  test: /\.html$/,
                  use: {
                      loader: "html-loader"
                  }
              },
              {
                  test: /\.css$/,
                  use: [MiniCssExtractPlugin.loader, "css-loader"]
              }
          ]
      },
  
      plugins: [
          new HtmlWebPackPlugin({
              template: './src/index.html',
              filename: './index.html'
          }),
          new MiniCssExtractPlugin({
              filename: '[name].css',
              chunkFilename: '[id].css'
          }),
          new ErrorOverlayPlugin(),
          new BrowserSyncPlugin({
              host: '86.190.13.18',
              port: 3000,
              proxy: 'http://localhost:8080/',
          },{ reload: false }),
      ],
  
      devServer: {
          stats: {
              builtAt: false,
              children: false,
              modules: false,
              colors: true,
              progress: true,
          },
          // open: true, // BrowserSync opens the browser tab
          overlay: true,
      }
  }
  </code></pre>
  
  <p>folder structure</p>
  
  <pre><code>Project_Folder
      node_modules
      src
          index.html
          index.js
          main.css
      .babelrc
      package.json
      webpack.config.js
  </code></pre>
  
  <p>I want to make BrowserSync give the correct UI External host, one that I can use on my mobile and keep the website in sync with the localhost.</p>