Question

当我保存更改或重新加载我的React应用程序时，我在控制台中收到警告，并且在重新加载时也很慢

我没有使用create-react-app，而是继续浏览Traversy Media的视频https://www.youtube.com/watch?v=deyxI-6C2u4，该视频从头开始设置了Webpack。

前几天实际上运行良好，但是每当保存后重新加载我的应用程序时，突然突然开始运行很慢。这些是第二次显示的控制台警告，但是在应用程序重新加载后消失：

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because ./src/Components/Layout/Home.js is not accepted
Update propagation: ./src/Components/Layout/Home.js -> ./src/Components/App.js -> ./src/index.js -> 0 at hotApply(http://localhost:8080/index_bundle.js:476:30) at http://localhost:8080/index.bundle.js:314:22

这是应用程序运行时控制台中显示的内容（这是灰色文本-不是警告）

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(md|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
}

我假设我必须在Webpack文件中添加一些内容。有人可以向我解释为使应用程序再次平稳运行必须放入的内容吗？谢谢

Answer 1

您有此警告

更新传播：./ src / Components / Layout / Home.js-> ./src/Components/App.js-> ./src/index.js

因为您更改了Home.js中的代码，但是Home.js是App.js的子级，而App.js是index.js的子级，所以它有点像嵌套树。所以webpack不知道如何重新加载页面，因为它深深嵌套在2或3级文件中。这只是对webpack的警告，它无法进行热重装，因此基本上一切正常。

页面上的Webpack警告重新加载

1 个答案: