Browsersync Couldn't open browser, using Docker and Webpack

问题

Problem

When I run npm run start to serve and watch via webpack, I got the warning below, after the scripts finish execution. I'm getting the browser up and running, it loads the page perfectly and shows a notification that it's connected to Browsersync. But when I do any change to any file (html, css or js). It doesn't reload!?

Is it because I am in a Docker virtual environment, or because I'm not correctly instructing Browsersync to look for the right path of where my code is, or something related to the proxy setup in the BrowserSyncPlugin, or something else..? I have no idea what's causing this, should I keep trying to fix it or is it a known issue! Thanks,

[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

Warning Image

Simplified WebPack Config file (for development)

const path = require('path')
const webpack = require('webpack')
const recursive = require('recursive-readdir-sync')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const Dotenv = require('dotenv-webpack')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const srcDir = path.resolve(__dirname, '..', 'src')
const distDir = path.resolve(__dirname, '..', 'dist')
const {NODE_ENV = 'development'} = process.env

module.exports = {
    context: srcDir,
    devtool: 'source-map',
    entry: ['./index.js'],
    output: {
        filename: 'main.js',
        path: distDir,
        publicPath: '/',
        sourceMapFilename: 'main.map'
    },
    devServer: {
        contentBase: srcDir,
        publicPath: '/',
        historyApiFallback: true,
        host: '0.0.0.0',
        port: 4444,
    },
    watchOptions: {
        usePolling: true
    },
    plugins: 
        [
            new BrowserSyncPlugin(
                // BrowserSync options
                {
                    host: '0.0.0.0',
                    port: 4000,
                    proxy: 'http://0.0.0.0:4444/'
                },
                // BrowserSync WebPack plugin options
                {
                    reload: false
                }
            )
        ],
    )
}

Package.json scripts and dependencies

  "scripts": {
    "clean": "rimraf dist",
    "start": "npm run watch && npm run serve",
    "serve": "webpack-dev-server --progress --colors",
    "watch": "webpack",
    "build": "npm run clean && NODE_ENV=production webpack",
    "lint": "eslint src config",
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^1.2.0",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.0",
    "eslint": "^4.2.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "handlebars": "^3.0.3",
    "handlebars-loader": "^1.5.0",
    "html-webpack-plugin": "^2.29.0",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "preload-webpack-plugin": "^1.2.2",
    "recursive-readdir-sync": "^1.0.6",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.8",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.5.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "dotenv-webpack": "^1.5.4",
    "jquery": "^3.2.1",
    "normalize.css": "^7.0.0",
    "scrollreveal": "^3.3.6"
  }

Docker compose file (section from the Container)

  //...
  ports:
    - "${WORKSPACE_SSH_PORT}:22"
    - "4000:4000"
    - "4444:4444"
    - "3001:3001"
  //...

来源：https://stackoverflow.com/questions/47110359/browsersync-couldnt-open-browser-using-docker-and-webpack