Webpack Dev Server(webpack-dev-server)热模块替换(HMR)不起作用

Question

我已经在StackOverflow和GitHub问题上经历了很多答案,但是,我仍然陷入了Webpack中的热模块替换.我npm start用来运行我的服务器webpack-dev-server --hot --inline.我正在尝试更改我的React组件中的代码,但浏览器中没有任何反应.

我在Ubuntu 14.04LTS上使用Google Chrome版本49.0.2623.87(64位).

在我的浏览器中console,我收到日志消息

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

[WDS]启用热模块更换.

但是,没有热/实时重载正在发生.当我在React组件文件中更改代码时,没有显示任何内容.我正在关注本教程的第一个视频,Egghead.io/ReactFundamentals,其中一切正常.

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

如果有人可以指导我完成这个问题,那将是很棒的,因为我无法进一步有效地完成本教程.

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

Answer 1

我自己想出了解决方案。

我必须运行我的服务器sudo。相反npm start，它必须是sudo npm start。

希望能帮助到你！

Answer 2

尝试将模块加载器更新为：

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