Browsersync无法打开浏览器,使用Docker和Webpack

问题

当我运行npm run start服务和通过webpack观看,我得到了下面的警告,脚本完成执行后。 我将浏览器启动并运行,它完美地加载了页面,并显示通知它已连接到Browsersync。 但是,当我做任何改变任何文件(HTML,CSS或JS)。 它不会重新加载!?

是因为我在Docker虚拟环境中,还是因为我没有正确地指示Browsersync去寻找我的代码的正确path,或者是与BrowserSyncPlugin中的代理设置有关的东西,或者其他的东西。 我不知道是什么原因造成的,我应该不断尝试修复它还是已知的问题! 谢谢,

[Browsersync]无法打开浏览器(如果您在无头环境中使用BrowserSync,则可能需要将打开选项设置为false)

警告图像

在这里输入图像说明

简化的WebPackconfiguration文件(用于开发)

 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": { "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撰写文件(Container中的部分)

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