404 a causa del riavvio del webpack-dev-server di

Question

sto ottenendo questo nei miei strumenti di sviluppo quando provo cambiare la mia reagiscono componente e salvarlo per vedere se caricatore caldo aggiornato la mia pagina:

GET http://localhost:3000/public/bundle/76566a1ad7e45b834d4e.hot-update.json 404 (Not Found)hotDownloadManifest @ main.js:26hotCheck @ main.js:210check @ main.js:9288(anonymous function) @ main.js:9346 
main.js:9303 [HMR] Cannot find update. Need to do a full reload! 
main.js:9304 [HMR] (Probably because of restarting the webpack-dev-server) 

I' Non sono sicuro del motivo per cui questo si sta verificando. Sto provando a fare funzionare Django come il mio server di backend (webpack instructions)

Ecco il mio webpack.watch.js:

var path = require('path'); 
var config = require("./webpack.config.js"); 
var Webpack = require("webpack"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

var port = process.env.WEBPACK_PORT || 3000; 
var host = process.env.HOST || 'localhost'; 

config.entry.unshift(
    "webpack-dev-server/client?http://" + host + ":" + port, 
    "webpack/hot/only-dev-server" // only prevents reload on syntax errors 
); 

config.plugins = [ 
    new Webpack.HotModuleReplacementPlugin(), 
    new Webpack.NoErrorsPlugin(), // don't reload if there is an error 
    new ExtractTextPlugin("style.css", { 
     allChunks: true 
    }) 
]; 

config.module.loaders = [ 
    { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, 
    { test: /\.json$/, loader: 'json-loader' }, 
    { test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') }, 
    { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'}, 
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'}, 
    { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') } 
]; 

config.devServer = { 
    publicPath: config.output.publicPath, 
    filename: 'main.js', 
    contentBase: './public', 
    hot:   true, 
    // Make connection between webpack-dev-server and its runtime set inline: true 
    inline:  true, 
    lazy:  false, 
    quiet:  true, 
    noInfo:  true, 
    headers:  {"Access-Control-Allow-Origin": "*"}, 
    stats:  {colors: true}, 

    // webpack-dev-server will serve built/bundled static files from host:port 
    host:  "0.0.0.0", 
    port:  port 
}; 

module.exports = config; 

Ecco il mio webpack.config.js:

module.exports = { 
    entry: [ 
     './app/index.js' 
    ], 

    output: { 
     path: './public/bundle', 
     filename: 'main.js', 
     publicPath: 'http://localhost:3000/public/bundle/' 
    }, 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}), 
    ], 

    module: { 
     loaders: [ 
      { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, 
      { test: /\.json$/, loader: 'json-loader' }, 
      { test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') }, 
      { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'}, 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'}, 
      { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') } 
     ] 
    }, 
} 

Answer 1

Invece di utilizzare

entry: [ 
    './app/index.js' 
], 

come la voce

aggiungere due ulteriori voci con essa in questo modo:

entry: [ 
    'webpack-dev-server/client?http://localhost:3000', // WebpackDevServer host and port 
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors 
    './app/index.js' // Your appʼs entry point 
]