Webpack 开发服务器 (webpack-dev-server) 热module更换 (HMR) 不工作

IT技术 javascript reactjs webpack webpack-dev-server react-hot-loader
2021-05-24 04:33:12

我已经在 StackOverflow 和 GitHub 问题上找到了很多答案，但是，我仍然停留在 Webpack 中的热module替换中。我使用的npm start运行我的服务器webpack-dev-server --hot --inline。我正在尝试更改 React 组件中的代码，但浏览器中没有任何react。

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

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

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

[WDS] 热module更换已启用。

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

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

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

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

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

4个回答

我自己想出了解决方案。

我必须用sudo. 相反npm start，它必须是sudo npm start。

希望能帮助到你！

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

您的 webpack 配置已关闭。查看react-transform-b​​oilerplate以获得正确的设置。

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

我刚刚删除了node_modules文件夹和package-lock.json文件。然后重新运行npm install。有效！

其它你可能感兴趣的问题
上一篇在 AWS Amplify 上重新加载 React 应用程序时出现“拒绝访问”错误 下一篇钻孔母板的正确材料