私はReact Hot Loaderを理解できません。私のbundle.jsは有効で、私のサーバーは接続していますが、ブラウザでGETできないメッセージが表示されています

Question

webpackを実行してサーバーを接続できますが、ブラウザに表示されるメッセージはGETできません。彼らは私が設定を混乱させている場所に気づくことができるかどうか誰かが見ることができます。すべての私のコンポーネントは次のようになりwebpack.config.jsファイル './国民との関係でそう

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)/ 
     } 
    ] 
    } 
}; 

サーバー、公共と呼ばれるファイルです。あなたはサーバーを介してこれを実行しているので、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

あなたは「http://0.0.0.0:3000/」にごpublicPathを指している必要があります。