热重载不适用于我的 webpack 5 反应项目

2024-02-06

我正在创建一个新项目。当我完成安装 npm 包并运行基本设置时,一切正常,除了当我在代码中进行更改并保存文件并移动到浏览器以查看更改时,页面没有在浏览器中重新加载。我必须手动刷新页面才能看到新的更改。

这是我的 package.json 文件:

{
  "name": "resume",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-react": "^7.12.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.1",
    "webpack": "^5.12.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  }
}

这是我的 webpack.config.js:

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { web } = require('webpack')

module.exports = {
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    target: 'web',
    // entry: {
    //     main: path.resolve(__dirname, './src/index.js'),
    // },
    // output: {
    //     path: path.resolve(__dirname, './dist'),
    //     filename: '[name].bundle.js',
    // },
    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve('./index.html'),
            filename: 'index.html', // output file
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ],
}

我在网上搜索了一下,问题似乎出在webpack-开发服务器,但我不确定。请帮忙。


Update webpack-开发服务器版本为4.0.0-beta.0我也有同样的问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

热重载不适用于我的 webpack 5 反应项目 的相关文章

随机推荐

  • Android - Retrofit2 - java.security.cert.CertPathValidatorException:未找到证书路径的信任锚

    我想从服务器获取数据 https data egov kz api v2 zheke zhane zandy tulgalardy k1 v6 pretty https data egov kz api v2 zheke zhane zan
  • 如何在谷歌可视化图表上加载JSON数据?

    我是谷歌可视化的新手 我正在开发一个完整的仪表板 例如谷歌完整仪表板示例 https code google com apis ajax playground type visualization full dashboard 按照示例 我
  • 回车换行 Windows 和 Linux java 应用程序

    我正在开发一个集成测试应用程序 这就是我在测试用例中所做的事情 我读取了一个测试输入文件 该文件存储在 cvs 中 将其写入文件系统中的文件 应用程序轮询该文件的目录 处理它并创建输出文件 然后我轮询输出文件的目录 如果两个文件内容相等 则
  • 非 WSDL 模式下的 SOAP 问题

    我正在制作一个简单的网络服务 用于我拥有的两个网站之间的通信 由于它只是一个基本应用程序 我一直在没有 WSDL 文件的情况下工作 所以在non WSDL mode正如 PHP 手册所称 这基本上就是客户端的样子 client new So
  • ASP Response.Flush() 刷新部分数据

    我正在开发一个带有 ASP 服务器端的 Web 应用程序 并使用 iframe 进行数据推送 ASP 处理程序每 隔一段时间就会将一些 javascript 刷新到 iframe context Response Write context
  • 字符串是如何排序的?

    有人可以解释一下以下函数的输出 public static void main String args String str1 new String 20 String str2 new String 100 List
  • 派生重载运算符,但仅对相同类型进行操作

    假设我有一个基类和两个从它派生的类 class Base protected double value public virtual Base Base double value value value Base const Base B
  • 无法设置未定义的属性“clientMutationId”

    我收到以下错误 当尝试通过 graphiql 运行突变时 请帮助我解决此问题或指向一个链接 我可以在其中找到反应中继突变示例 mutation createUser input username Hamza Khan clientMutat
  • pylint 为可调用的对象属性提供不可调用错误

    不确定我是否做错了什么或者这是否是一个问题pylint 在下面的代码中我得到一个 linting 错误self type不可调用E1102 虽然我可以忽略它并继续工作 但似乎这种事情应该很容易解决 只是不知道如何解决它 from typin
  • 使用正则表达式进行全字匹配

    我想要一个匹配 bananas 或 睡衣 但不匹配 bananas2 或 bananaspajamas 或 banana 或基本上除了这两个单词之外的任何内容的C 正则表达式 所以我这样做了 include
  • 在golang中传输一个大文件

    客户端发送文件 大小可能大于5G 发送到从服务器 然后从服务器发送到主服务器 从属设备会将临时文件保存到自身吗 我不希望发生这种情况 因为它会减慢上传速度并浪费从站的内存 有什么办法可以避免这种情况吗 在 golang 中传输大文件的最佳方
  • 将 DOM 操作应用于 HTML 并保存结果?

    我有大约 100 个静态 HTML 页面 我想对其应用一些 DOM 操作 它们都遵循相同的 HTML 结构 我想对每个文件应用一些 DOM 操作 然后保存生成的 HTML 这些是我想要应用的操作 start h1 title h2 desc
  • [Flags] Enum 属性在 C# 中意味着什么?

    我有时会看到如下的枚举 Flags public enum Options None 0 Option1 1 Option2 2 Option3 4 Option4 8 我不明白到底是什么 Flags 属性确实如此 有人可以发布一个很好的解
  • 在 Delphi 中创建可访问的 UI 组件

    我正在尝试从标准 VCL TEdit 控件检索可访问的信息 get accName 和 Get accDescription 方法返回空字符串 但 get accValue 返回输入到 TEdit 中的文本值 我刚刚开始尝试理解 MSAA
  • 如何在 Drupal 8 主题中添加 javascript 库?

    我正在尝试包含一个自定义 javascript 文件来操作我正在构建的 Drupal 8 主题中的菜单 我按照 Drupal 8 主题指南中的说明进行操作 将其包含在我的 info yml 文件中 js libraries librarie
  • 尝试第一个日志语句时,Boost Log 会导致崩溃(当不是管理员时)

    我现在正在尝试部署我的应用程序 它使用 Boost Log Boost 1 58 它是一个简单的控制台应用程序 在 Windows 7 中运行 日志记录在我的个人桌面上运行得非常好 但是 当我将应用程序部署到 Win7 虚拟机时 它在我的第
  • ZF2如何监听特定控制器的调度事件

    如何监听特定控制器的调度事件 目前我执行以下操作 模块 php public function onBootstrap EventInterface event application event gt getApplication eve
  • JavaFX:在 .FXML 文件中嵌入编码图像

    我想将编码图像嵌入到 FXML 中 我需要这个 因为我正在编写 svg 和 fxml 之间的转换器 我尝试过这个
  • F# 的编译器是用哪种语言编写的?

    F 的编译器是用哪种语言编写的 我听说 F 的编译器是用 F 编写的 F 编译器的每个下一个版本都是在其先前版本的基础上编写的 But 1 无法谷歌是否属实 2 如果属实 F 编译器的第一个版本是用哪种语言编写的 F 编译器是用 F 编写的
  • 热重载不适用于我的 webpack 5 反应项目

    我正在创建一个新项目 当我完成安装 npm 包并运行基本设置时 一切正常 除了当我在代码中进行更改并保存文件并移动到浏览器以查看更改时 页面没有在浏览器中重新加载 我必须手动刷新页面才能看到新的更改 这是我的 package json 文件