wake-up-neo.net

Webpack-Dev-Server (Webpack-Dev-Server) Hot Module Replacement (HMR) funktioniert nicht

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

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

In meinem Browser console erhalte ich Protokollmeldungen als

[HMR] Warten auf Update-Signal von WDS ...

[WDS] Hot Module Replacement aktiviert.

Es findet jedoch kein Hot/Live-Reload statt. Wenn ich den Code in meiner React-Komponentendatei ändere, wird nichts angezeigt. Ich verfolgte das erste Video dieses Tutorials, Egghead.io/ReactFundamentals wo alles gut funktioniert hat.

Es folgen meine Dateien package.json & webpack.config.js.

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 ist großartig, wenn mich jemand durch dieses Problem führt, da ich mit dem Tutorial nicht effizienter vorgehen kann.

Update Ich habe die Antwort unten gepostet.

10
krishnaxv

Ich habe die Lösung selbst herausgefunden.

Ich muss meinen Server mit Sudo ausführen. Anstelle von npm start muss es sich um Sudo npm start handeln.

Ich hoffe es hilft!

4
krishnaxv
devServer: {
 inline: true, // you missed this line which will reload the browser
 port : 7777
}
3
Phi Nguyen

Ihre Webpack-Konfiguration ist deaktiviert. Schauen Sie sich react-transform-boilerplate für eine korrekte Einrichtung an.

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"]
    }
  }
}
3
FakeRainBrigand

Ich habe gerade den Ordner node_modules Und die Datei package-lock.json Gelöscht. Führen Sie dann erneut npm install Aus. Es funktionierte!

0
Meet Zaveri

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

Und ich benutze 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);
        });
       }

Der gleiche Code wird auf dem Computer anderer Mitarbeiter sofort ersetzt, aber nicht immer, aber oft funktioniert Hot Replace auf meinem Computer nicht.

0
Srivathsa Rao