为什么带有BrowserSync外部主机的Webpack-Dev-Server指向本地主机？

Question

我正在尝试通过Webpack和Webpack-Dev-Server使用BrowserSync，我的目的是使BrowserSync也在手机上显示我的网站，并使它与本地主机上浏览器的更改保持同步。

这是控制台中的webpack输出

> 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
 -------------------------------------

这是我到目前为止的内容：

package.json

    {
          "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,
    }
}

文件夹结构

Project_Folder
    node_modules
    src
        index.html
        index.js
        main.css
    .babelrc
    package.json
    webpack.config.js

我想让BrowserSync提供正确的UI外部主机，可以在移动设备上使用它，并使网站与本地主机保持同步。