Javascript 网页包开发服务器（网页包开发服务器）热模块更换（HMR）不工作

关于StackOverflow和GitHub问题，我已经回答了很多问题，但我仍然被困在Webpack中的热模块替换中。我正在使用

npmstart

来运行我的服务器，使用

webpack dev server--hot--inline

我正在尝试更改React组件中的代码，但浏览器中没有任何操作

我在Ubuntu 14.04LTS上使用Google Chrome版本49.0.2623.87（64位）

在我的浏览器

控制台中

，我收到的日志消息如下

[HMR]正在等待来自WDS的更新信号

[WDS]热模块更换已启用

但是，没有发生热/实时重新加载。当我更改React组件文件中的代码时，不会显示任何内容。我在看本教程的第一个视频，在那里一切都很好

以下是我的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"]
        }
      }
    ]
  }
}

如果有人能指导我解决这个问题，那就太好了，因为我无法更有效地继续学习教程

更新我已经在下面发布了答案

---

尝试将模块加载程序更新到以下位置：

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

---

您的网页包配置已关闭。查看以获得正确的设置

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

B.法律改革委员会

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

---

我自己想出了解决办法

我必须使用

sudo

运行服务器。而不是

npm start

，它必须是

sudo npm start

---

希望有帮助

我使用以下版本： “网页包”：“~1.12.14” “网页包热中间件”：“^2.10.0” “网页包开发中间件”：“^1.6.1”

在我的react.js项目中，我在app.js中使用了以下代码

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

---

相同的代码在其他员工的计算机上被热替换，但并不总是如此，但很多时候热替换在我的计算机上都不起作用。

我刚刚删除了

节点模块

文件夹和

包锁.json

文件。然后重新运行

npm安装

。成功了

你有什么错误吗？您是否仍在访问端口7777上的应用程序？它是否是无状态功能组件？你的应用程序在虚拟机上运行时像流浪汉吗？@markthethomas不，我没有收到任何错误。捆绑包通过以下消息有效：“webpack:捆绑包现在有效。”。是的，我正在访问端口7777上的应用程序。@azium不，我没有使用任何类似Vagrant的VM。@azium不，它不是无状态的功能组件。react-hot-loader不受欢迎。他在他的依赖项中列出了它。我已经按照前面提到的教程中的建议尝试过了，但没有成功。后来我把它改为

webpack dev server--hot--inline

。我不喜欢

react transform样板文件，因为它现在是实验性的。另外，我想用webpack dev服务器本身进行热/实时重新加载，而不涉及
react hot loader
插件，因为我想保持现在的简单。你在我的配置文件中发现我做错了什么吗？谢谢你的回复！一旦我能弄明白这一点，我一定会尝试使用
react transform样板文件
。即使我在
npm start
或
npm run start
前面使用
sudo
，我也无法让它工作。但我确信
webpack dev server
在运行一个命令后，无论是否使用
sudo
，它都已经运行了我谢谢你的解决方案。。。但我仍然好奇它是如何工作的。
    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);
        });
       }