Webpack-Dev-Server (webpack-dev-server) Hot-Modul-Ersatz (HMR) funktioniert nicht

Question

Ich habe viele Antworten auf StackOverflow & auf GitHub Probleme auch gegangen, aber ich bin immer noch in Hot Module Replacement in Webpack stecken. Ich verwende npm start, um meinen Server mit webpack-dev-server --hot --inline auszuführen. Ich versuche, Code in meiner React-Komponente zu ändern, aber nichts passiert im Browser.

Ich verwende Google Chrome Version 49.0.2623.87 (64-Bit) auf Ubuntu 14.04LTS.

In meinem Browser console, erhalte ich Log-Meldungen als

[HMR] für Update-Signal von WDS Waiting ...

[WDS] Ersatz Hot Module aktiviert.

Es findet jedoch kein Hot/Live-Reload statt. Wenn ich den Code in meiner React-Komponentendatei ändere, wird nichts angezeigt. Ich folgte dem ersten Video dieses Tutorials, Egghead.io/ReactFundamentals wo alles in Ordnung war.

Im Folgenden sind meine package.json & webpack.config.js Dateien.

package.json

{ 
    "name": "react-fundamentals", 
    "version": "1.0.0", 
    "description": "Fundamentals of ReactJS", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot --inline" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.0.0-rc.2", 
    "react-dom": "^15.0.0-rc.2" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.7.2", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

webpack.config.js

module.exports = { 
    context: __dirname, 
    entry: "./main.js", 
    output: { 
    path: __dirname, 
    filename: "bundle.js" 
    }, 
    devServer: { 
    port: 7777 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel", 
     query: { 
      presets: ["es2015", "react"] 
     } 
     } 
    ] 
    } 
} 

Es wird groß sein, wenn jemand mich durch dieses Problem führen kann, wie ich nicht in der Lage bin weiter zu gehen effizient mit dem Tutorial.

Update Ich habe die Antwort unten gepostet.

Answer 1

Versuchen Sie, Modul-Lader zu dieser Aktualisierung:

loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /node_modules/, 
     loaders: ["react-hot", "babel"], 
     query: { 
      presets: ["es2015", "react"] 
     } 
     } 
    ] 

Answer 2

devServer: { 
inline: true, // you missed this line which will reload the browser 
port : 7777 
} 

Answer 3

Ihre webpack Config ist ausgeschaltet. Werfen Sie einen Blick auf react-transform-boilerplate für eine korrekte Einrichtung.

webpack.config.js

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

module.exports = { 
    // or devtool: 'eval' to debug issues with compiled output: 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    // necessary for hot reloading with IE: 
    'eventsource-polyfill', 
    // listen to code updates emitted by hot middleware: 
    'webpack-hot-middleware/client', 
    // your code: 
    './src/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/dist/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'src') 
    }] 
    } 
}; 

.babelrc

{ 
    "presets": ["react", "es2015"], 
    "env": { 
    "development": { 
     "presets": ["react-hmre"] 
    } 
    } 
} 

Answer 4

dachte ich mir die Lösung aus.

Ich muss meinen Server mit sudo ausführen. Anstelle von npm start muss es sudo npm start sein.

Hoffe es hilft!

Answer 5

Ich benutze die folgende Version: "webpack": "~ 1.12.14" "webpack-hot-middleware": "^ 2.10.0" "webpack-dev-Middleware": "^ 1.6.1"

und ich verwende folgenden Code in app.js in meinem react.js Projekt

var webpackconfig =require('./webpack.config'); 
    var webpack = require('webpack'); 
    var webpackMiddleware = require('webpack-dev-middleware'); 
    var webpackHotMiddleware = require('webpack-hot-middleware'); 

    var http = require('http'); 
    var express = require('express'); 
    var app = require('express')(); 
    var isDeveloping = process.env.NODE_ENV != 'production'; 
    // var isDeveloping = false; 
    console.log("IS developing ",isDeveloping); 
    var serverConfig = require('./globalconfig.js') 

    var serverPort = serverConfig.port 

    app.get('/css/bootstrap.min.css', function (req, res) { 
    res.sendFile(path.join(__dirname,   'public/lib/bootstrap/css/bootstrap.min.css')); 
    }); 



    // swaggerRouter configuration 
    var options = { 
    controllers: './controllers', 
    useStubs: process.env.NODE_ENV === 'development' ? true : false // Conditionally turn on stubs (mock mode) 
    } 

    var config = { 
     appRoot: __dirname // required config 
     } 


    // Start the server 
    app.listen(serverPort, function() { 
     console.log('Your server is listening * on port %d  (http://localhost:%d)', serverPort, serverPort); 
}); 


    if (isDeveloping) { 
     app.use('/node_modules', express.static('/node_modules')); 
     app.use(express.static('src/web-ui/public/')); 
     app.use(express.static('src/web-ui/public/')); 
     const compiler = webpack(webpackconfig); 
     const middleware = webpackMiddleware(compiler,{ 
     publicPath: webpackconfig.output.publicPath, 
     headers: { 
      "Cache-Control" : "public, max-age=604800" 
     }, 
     constentBase:'dist', 
     stats:{ 
     color:true, 
     hash:false, 
     timings:true, 
      chunks:false, 
     chunkModules:false, 
     modules:false 
     } 

     }); 
     app.use(middleware); 
     app.use(webpackHotMiddleware(compiler)); 
     app.get('/',function response(req,res){ 
         res.write(middleware.fileSystem.readFileSync(path.join(_dirname,'dist/index.html'))); 
     res.end(); 
     }); 
    } else { 
     app.use('/node_modules', express.static('/node_modules')); 
     app.use(express.static('dist/public')); 
     app.use(express.static('dist')); 

     app.get('/', function response(req, res,next) { 
     console.log("Processing req"); 
     var entryFile = path.join(__dirname, 'dist', 'index.html'); 
      console.log("Hitting the Root",entryFile); 
      res.sendFile(entryFile); 
     }); 
     } 

Gleicher Code heiß ersetzt auf andere Mitarbeiter Computer, aber nicht immer, aber viele Male ersetzen ersetzen funktioniert nicht in meinem Computer