Ich kann React Hot Loader nicht herausfinden. Mein bundle.js ist gültig und mein Server verbindet, aber ich sehe eine Nachricht im Browser

Question

Ich kann webpack zum Laufen bringen und der Server verbindet, aber alles, was ich im Browser sehe, ist eine Nachricht, die nicht GET erhalten kann. Könnte jemand sehen, wenn sie sehen können, wo ich die Konfiguration vermassle. Alle meine Komponenten sind in einer Datei öffentlich genannt, so in Bezug auf die webpack.config.js Datei, wäre './ public'

webpack.config.js

var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'script!jquery/dist/jquery.min.js', 
    'script!foundation-sites/dist/foundation.min.js', 
    'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port 
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors 
    './public/index.jsx' 
    ], 
    externals: { 
    jquery: 'jQuery' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.ProvidePlugin({ 
     '$': 'jquery', 
     'jQuery': 'jquery' 
    }) 
    ], 
    output: { 
    path: __dirname, 
    filename: './public/bundle.js', 
    publicPath: './public/' 
    }, 
    resolve: { 
    root: __dirname, 
    alias: { 
     App: 'public/components/App.jsx', 
     Home: 'public/components/Home.jsx', 
     Footer: 'public/components/Footer.jsx', 
     Inventory: 'public/components/Inventory.jsx', 
     Login: 'public/components/nav/Login.jsx', 
     Navbar: 'public/components/nav/Navbar.jsx', 
     ProductSearch: 'public/components/Product-Search.jsx', 
     SingleProduct: 'public/components/Single-Product.jsx', 
     Product: 'public/components/Product.jsx', 
     Signup: 'public/components/Signup.jsx', 
     LandingNavbar: 'public/components/nav/LandingNavbar.jsx', 
     ProductSearch: 'public/components/ProductSearch.jsx', 
     Examples: 'public/components/Examples.jsx', 
     Pricing: 'public/components/Pricing.jsx', 
     Profile: 'public/components/Profile.jsx', 
     Checkout: 'public/components/Checkout.jsx', 
     Receipt: 'public/components/Receipt.jsx', 
     RequireAuth: 'public/components/auth/require_auth.jsx', 
     Signout: 'public/components/Signout.jsx', 
     Tour: 'public/components/tour/Tour.jsx', 
     BusinessTypes: 'public/components/tour/BusinessTypes.jsx', 
     Customers: 'public/components/tour/Customers.jsx', 
     Features: 'public/components/tour/Features.jsx', 
     GettingStarted: 'public/components/tour/GettingStarted.jsx', 
     MultiStore: 'public/components/tour/MultiStore.jsx', 
     Support: 'public/components/tour/Support.jsx', 
     Actions: 'public/actions/index.js' 
    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'], 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/ 
     } 
    ] 
    } 
}; 

Server. js

const express = require('express'); 
const http = require('http'); 
const bodyParser = require('body-parser'); 
const morgan = require('morgan'); 
const app = express(); 
const router = require('./router'); 
const mongoose = require('mongoose'); 
const serverConfig = require('./config.js'); 
var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 

// DB Setup for mlab 

mongoose.connect(serverConfig.database, function(err) { 
    if (err) { 
     console.log(err); 
    } else { 
     console.log("Connected to the database"); 
    } 
}); 

// Connects to local database 

// mongoose.connect('mongodb://localhost:auth/auth'); 

// App Setup 

app.use(morgan('combined')); //logs incoming requests 

app.use(bodyParser.json({ type: '*/*' })); //parses incoming requests into JSON, '*/*' accepts any type of request 

app.use(express.static(__dirname + '/public')); //serves public folder containing front-end 

app.get('/', function (req, res) { 

    res.send(__dirname + '/public/index.html'); //serves index.html when home route is hit 

}); 

router(app); 

//Server Setup 


const port = process.env.PORT || 3000; 


// Webpack dev server below 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(port, 'localhost', function (err, result) { 
    if (err) { 
    return console.log(err); 
    } 

    console.log('Listening at http://localhost:3000/'); 
}); 

Answer 1

Sie Ihre publicPath auf "http://0.0.0.0:3000/" zeigen sollte, da Sie dies durch einen Server ausgeführt werden.