Zugriff auf Webpack Dev Server über lokales Netzwerk? (React Hot Reloading auf Handy)

Question

Ich möchte eine React-Website von einem Gerät in meinem lokalen Netzwerk testen. Es funktioniert auf anderen PCs, aber nicht auf meinem Handy.

Haben Sie irgendwelche Ideen, was könnte das verursachen? Hier ist, wie meine Config-Datei aussieht:

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 

    entry: { 
     mainFeedPage: [ 
      'webpack/hot/only-dev-server', 
      './src/mainFeedPage.js' 
     ], 
     venues: [ 
      'webpack/hot/only-dev-server', 
      './src/venues.js' 
     ], 
     artists: [ 
      'webpack/hot/only-dev-server', 
      './src/artists.js' 
     ] 
    }, 
    output: { 
     path: path.resolve(__dirname, 'public'), 
     filename: 'js/[name].js', 
     publicPath: '/public/' 
    }, 
    devServer: { 
     inline:true, 
     port: 4000, 
     hot: true, 
     colors: true, 
     progress: true, 
     host: '0.0.0.0' 

    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loaders: [ 
        'react-hot', 
        'babel?presets[]=react,presets[]=es2015' 
       ] 
      } 
     ] 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 

      // Export bundles for each entry and one for code they share 
      name: "shared", 
      filename: "js/shared.js", 
      chunks: ["mainFeedPage", "venues"] 
     }) 
    ], 

    resolve: { 
     modulesDirectories: ['node_modules', 'src', 'components', 'stores'], 
     extensions: ['', '.js', '.scss'], 
     root: [path.join(__dirname, './src')], 
    } 
}; 

UPDATE dies versucht, aber konnte es nicht arbeiten: https://github.com/gaearon/react-hot-loader/issues/107#issuecomment-85712166

Answer 1

Christian's example löste mein Problem. Sie müssten die Dateien webpack.config anpassen, wenn Sie Bundles verwenden möchten. Dies hätte nur durch Googlen gelöst werden können, aber ich brauchte viel Zeit, um zu verstehen, wie Node und Express funktionieren ...

Answer 2

Dies ist keine direkte Lösung, aber ich habe ein Projekt bekommt aus der Basis der React Transform-Boilerplate von Dan Abramov und funktioniert einwandfrei auf mobilen Android-Geräten. Habe nicht auf iOS getestet. Es ist im Prinzip sehr ähnlich zu React Hot Loader: https://github.com/gaearon/react-transform-boilerplate

Es ist veraltet, aber so ist React Hot Loader, bis Version 3 veröffentlicht wird.

Zugegeben, diese "Lösung" ist wahrscheinlich so, als würde man einen Nagel mit einem Vorschlaghammer schlagen. Hoffentlich kann jemand etwas einfacheres anbieten, das nicht ein paar Abhängigkeiten vertauschen und Konfigurationen aufbauen muss.