Question

我一直在家里和办公室的计算机上鬼混ReactJS。在家里，我正在使用Visual Studio 2019，NodeJS 10.16.2，NPM 6.9.0和Webpack 3.11.0。

当我第一次启动项目时，正在热装DID。在某个时候，它停止工作了。我以为我可能是无意中对程序包或设置做了一些更改，所以我从头开始创建了一个全新的解决方案，但是仍然无法正常工作。因此，显然我已经对机器做了一些操作，但是我无法想象会发生什么。

在工作中，还使用Visual Studio 2019（我必须检查其他版本），热重载确实可以工作。

有人能想到我可能偶然做的某件事导致它停止工作吗？还是尝试使其再次正常工作的方法？我已经尝试过几乎在网上找到的所有内容，但是其中大部分都不是最近的，都没有帮助。

package.json文件按要求：

{
  "name": "jobs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.1.3",
    "faye-websocket": "^0.11.3",
    "jquery": "3.4.1",
    "lodash": "^4.17.15",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.1",
    "react": "16.9.0",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.0.0",
    "react-loading-overlay": "^1.0.1",
    "react-router-bootstrap": "0.25.0",
    "react-router-dom": "5.0.1",
    "react-scripts": "3.1.1",
    "react-spinners": "0.6.1",
    "react-transition-group": "^4.2.2",
    "reactstrap": "8.0.1",
    "rimraf": "3.0.0",
    "toastr": "^2.1.4"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.1",
    "eslint": "6.3.0",
    "eslint-config-react-app": "5.0.1",
    "eslint-plugin-flowtype": "4.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "^7.14.3"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer 1

设置缓存：在webpack配置中为false。这将解决HMR问题

https://webpack.js.org/configuration/other-options/#cache

作为参考，您可以参考给定的链接

Answer 2

我认为这是模板问题。我建议您使用webpack卸载reactjs模板并添加自己的配置。遵循本手册https://webpack.js.org/guides/getting-started/

您可以从项目中手动加载捆绑文件

Answer 3

您应该为您的create-react-app配置热重载器。请检查this链接。此外，还有一些工作正在进行CRA的新热重装。请查看this链接以了解更多信息。

Answer 4

我在全新安装Visual Studio 2019时遇到了相同的问题，必须安装包含Web Essentials扩展名的Browser Reload on Save扩展名。

Answer 5

如果您使用Visual Studio运行该应用程序，并且由于某种原因运行了npm run build，则您将获得一个/ build文件夹，该文件夹与/ public文件夹对齐。然后，Visual Studio将首选/ build文件夹，因此您的热重装将无法进行。删除/ build文件夹，重建Visual Studio应用程序，并且在开发过程中不要使用“ npm run build”。

为什么热重加载不适用于reactjs visual studio 2019模板

5 个答案: