Browsersync + webpack

Question

我想在我的手機/平板電腦上測試我的應用程序，但我無法訪問它。我正在使用webpack-dev-server服務我的應用程序，但希望通過與其他設備的瀏覽器同步訪問它。問題是什麼？頁面正在加載，畢竟我得到「ERR_CONNECTION_TIMED_OUT」。它是angular2應用程序（如果它可以幫助你）。

webpack.config.js

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 

module.exports = { 
    entry: path.join(__dirname, './src/app.module.ts'), 
    output: { 
     path: path.join(__dirname, './dist/'), 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules)/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
         presets: ['env'], 
         plugins: ['transform-runtime'] 
        } 
       } 
      }, 
      { 
       test: /\.ts$/, 
       include: path.resolve(__dirname, 'src'), 
       loader: 'ts-loader' 
      }, 
      { 
       test: /\.scss$/, 
       include: path.resolve(__dirname, 'src'), 
       use: [ 
        { loader: 'style-loader' }, 
        { loader: 'css-loader' }, 
        { 
         loader: 'postcss-loader', 
         options: { 
          plugins: function() { 
           return [ 
            require('autoprefixer') 
           ]; 
          } 
         } 
        }, 
        { loader: 'sass-loader' } 
       ] 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loaders: [ 
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 
        'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
       ] 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.js', '.ts'] 
    }, 
    plugins: [ 
     new BrowserSyncPlugin({ 
       host: 'localhost', 
       port: 3000, 
       proxy: 'http://localhost:3100/' 
      }, 
      { 
       reload: false 
      } 
     ), 
     new HtmlWebpackPlugin({ 
      template: path.join(__dirname, './src/index.html'), 
     }), 
    ] 
}; 

的package.json

{ 
"name": "translation", 
    "version": "0.0.1", 
    "description": "translations (using i18n)", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack --progress", 
    "serve": "webpack-dev-server --progress" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "http://git.krakow.comarch/rnd/translation-i18n" 
    }, 
    "author": "K.N.", 
    "license": "ISC", 
    "dependencies": { 
    "@angular/animations": "^4.0.2", 
    "@angular/common": "~4.0.0", 
    "@angular/compiler": "~4.0.0", 
    "@angular/core": "~4.0.0", 
    "@angular/forms": "~4.0.0", 
    "@angular/http": "~4.0.0", 
    "@angular/platform-browser": "~4.0.0", 
    "@angular/platform-browser-dynamic": "~4.0.0", 
    "@angular/router": "~4.0.0", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.10", 
    "rxjs": "5.0.1", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-preset-env": "^1.2.2", 
    "browser-sync": "^2.18.8", 
    "browser-sync-webpack-plugin": "^1.1.4", 
    "css-loader": "^0.27.3", 
    "html-webpack-plugin": "^2.28.0", 
    "image-webpack-loader": "^3.3.0", 
    "node-sass": "^4.5.2", 
    "postcss-loader": "^1.3.3", 
    "sass-loader": "^6.0.3", 
    "style-loader": "^0.16.1", 
    "ts-loader": "^2.0.3", 
    "typescript": "^2.2.2", 
    "typings": "^2.1.0", 
    "webpack": "^2.3.2", 
    "webpack-dev-server": "^2.4.2" 
    } 
} 

我不知道是哪個人的文件應該已經給你。即使我不知道問題在哪裏..謝謝你的幫助。

UPDATE

我已經加入這個端口的防火牆：

Dowolny意味着 - 任何 仍然無法正常工作 - 同樣的結果：C

Answer 1

如果您的應用上localhost:8080那麼我相信你應該使用：

new BrowserSyncPlugin({ 
      host: 'localhost', 
      port: 3000, 
      proxy: 'http://localhost:8080/' 
     },