Question

构建一个反应应用程序以学习并发现webpack可以帮助我进行HMR。

但是当我更改组件（JSX）中的某些内容时，它不会更新，并显示以下内容：

以下模块无法进行热更新：（它们需要完整的模块   重新加载！）

log.js：26忽略了对不可接受的模块./src/App.js->的更新   ./src/index.js-> 0

代码：

Webpack：

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

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  // devServer: {
  //   contentBase: path.join(__dirname, "public/"),
  //   port: 3000,
  //   publicPath: "http://localhost:3000/dist/",
  //   hotOnly: true,
  //   historyApiFallback: true
  // },
  // plugins: [new webpack.HotModuleReplacementPlugin()]
  plugins: [new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: 'index.html',
    inject: 'body'
}),
new webpack.HotModuleReplacementPlugin()],
devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    historyApiFallback: true,
    hotOnly: true
}
};

Json：

{
  "name": "reactpluralsight",
  "version": "1.0.0",
  "description": "PluralSightTutorial",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open"
  },
  "author": "MrCode",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1",
    "webpack-hot-middleware": "^2.25.0"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

babel：

{
    "presets": ["@babel/env", "@babel/preset-react"]
}

App.js：

import React, { Component} from "react";
import "./App.css";
import { Hello } from "./The basics/FirstComponent"
import { Hook } from './The basics/FirstHook'
// import { HookC } from './The basics/FirstHookChallange'

class App extends Component{
  render(){
    return(
      <div className="App">
       <Hello/>
       <Hook/>
       {/* <HookC/> */}
      </div>
    );
  }
}

export default App;

有点恼人的部分是，它昨天工作了，但是今天由于某种原因它停止了。我正在研究三个JSX组件：

Hello Hook HookC

但是当我更改其中的某些内容时，我总是在浏览器中收到相同的日志消息。

我该如何解决？

编辑：不知道这是否重要，但是我正在使用npm和gitbash。

Answer 1

一段时间后，我发现了这个问题。

我的原始webpackconfig看上去和问题中的内容完全不同，但是我无法使其正常运行，因此我尝试了一些其他尝试。

最大的问题原来是devserver.hotOnly，根据文档：

启用热模块替换（请参阅devServer.hot）而无需页面如果发生构建失败，请刷新作为后备。

这真是令人误解，因为当您删除hotonly道具并进行如下配置时：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"],  plugins: ["transform-class-properties"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    historyApiFallback: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

HMR工作。

找到

个相关信息here

如何解决“无法热更新以下模块：（它们需要完全重新加载！）”

1 个答案: