Why does my Webpack-Dev-Server with BrowserSync external host points to the localhost? - webpack-dev-server

Question

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.
This is the webpack output in the console
> 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
-------------------------------------
This is what I have so far:
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,
}
}
folder structure
Project_Folder
node_modules
src
index.html
index.js
main.css
.babelrc
package.json
webpack.config.js
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.