Webpack Dev Server（webpack-dev-server）热模块替换（HMR）不起作用 [英] Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working

问题描述

我在StackOverflow&在GitHub问题上，但是，我仍然陷入Webpack中的热模块替换。我正在使用 npm start 使用 webpack-dev-server --hot --inline 运行我的服务器。 我正在尝试更改我的React组件中的代码，但浏览器中没有任何内容。

I have gone through many answers on StackOverflow & on GitHub issues as well but, I am still stuck in Hot Module Replacement in Webpack. I am using npm start to run my server with webpack-dev-server --hot --inline. I am trying to change code in my React component, but nothing happens in the browser.

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

I am using Google Chrome Version 49.0.2623.87 (64-bit) on Ubuntu 14.04LTS.

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

In my browser console, I am getting log messages as

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

[HMR] Waiting for update signal from WDS...

[WDS]已启用热模块替换。

[WDS] Hot Module Replacement enabled.

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

But, no hot/live reload is happening. Nothing gets displayed when I change code in my React component file. I was following first video of this tutorial, Egghead.io/ReactFundamentals where everything worked fine.

以下是我的package.json& webpack.config.js文件。

Following are my package.json & webpack.config.js files.

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

如果有人可以指导我解决这个问题，那将会很棒，因为我无法进一步有效地完成本教程。

It will be great if someone can guide me through this issue as I am not able to proceed further efficiently with the tutorial.

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

Update I have posted the answer below.

推荐答案

我自己想出了解决方案。

I figured out the solution myself.

我必须用<$ c运行我的服务器$ C>须藤。而不是 npm start ，它必须是 sudo npm start 。

I have to run my server with sudo. Instead of npm start, it has to be sudo npm start.

希望它有所帮助！

这篇关于Webpack Dev Server（webpack-dev-server）热模块替换（HMR）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！