春季启动后端+前端的热装

我骑着那些有关spring开发工具和热重装的文档

https://docs.spring.io/spring-boot/docs/current/reference/html/howto-hotswapping.html https://docs.spring.io/spring-boot/docs/current/reference/html/using -boot-devtools.html＃using-boot-devtools-restart-exclude

并且据此可以热重载Java和支持的React / Typescript / webpack应用

这是我们的架构（快捷方式）

mainmodule
    backendModules <- those modules are just maven project have theirs poms and etc
          backendModule1
          backendModule2
fontendModule
       content <- React/Typescript/Webpack/Less etc

backendModule2-我们用来启动后端backendModule1-只是一些附加服务fontendModule / content-是我们的整个React应用

如果我说要重新加载前端文件，我是对的，我必须：

配置Intellij，因为我通常在后端执行<-这很容易

1a。更改注册表

1b。自动选择构建项目

我的问题是我必须执行哪些操作才能强制重新加载前端文件-因此，开发人员只需运行1个应用，然后将自动重新加载后端+前端

将前端扩展添加到资源模式（Intellij：构建，执行->编译器）？jsx，json，js，less等？

根据文档添加“ spring.devtools.restart.additional-paths”

有人能做到吗？我们没有收到任何错误等信息。

让我知道是否有不清楚的地方，以便我们澄清一下

我知道有两种方法可以做到这一点。

1）使用Intellij File Watcher插件

2）运行webpack开发服务器作为您的spring-boot应用程序的反向代理

1）

从存储库安装插件“文件监视程序”

转到设置-工具-文件监视程序

定义一个Webpack任务

文件类型：任何

定义一个新的作用域以仅查看您的Javascript文件

程序：从/node_modules/webpack/bin/webpack.js运行webpack或创建其他可执行文件（例如$ ProjectFileDir $ / webpack.sh）

如果您选择从node_modules运行webpack（由于相对路径问题，btw对我不起作用），请插入参数（例如--config）

将输出路径设置为刷新：$ ProjectFileDir $ / src / main / static / js / bundled

将工作目录设置为：$ ProjectFileDir $

现在，如果将文件保存在定义的范围内，则将运行webpack任务。之后，您必须在浏览器中刷新页面。从https://intellij-support.jetbrains.com得到了这个想法

2）这种方法更高级，但更难正确配置。您将具有自动重新加载（页面刷新）和完全热加载（反应状态持续）的功能

基本思想是运行一个webpack-dev-server并将该服务器用作spring-boot后端的反向代理。开发服务器将自己处理对热重载内容的请求，并将其他所有内容传递给您的后端。从https://www.codingbismuth.com/获得了这个想法。

作为示例配置

{
  "name": "",
  "version": "0.0.1",
  "description": "",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "xy"
  ],
  "author": "murphy",
  "license": "",
  "bugs": {
    "url": ""
  },
  "scripts": {
    "start:dev": "webpack-dev-server --config webpack.dev_server.js"
  },
  "homepage": "",
  "dependencies": {
    "file-saver": "^1.3.3",
    "prop-types": "^15.5.10",
    "react": "^16.2.0",
    "react-bootstrap-typeahead": "^2.3.0",
    "react-dom": "^16.2.0",
    "react-modal": "^3.1.8",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-datetime": "^2.11.1",
    "rest": "^1.3.1",
    "moment": "^2.20.1",
    "webpack": "^3.10.0",
    "swagger-ui": "^3.13.4",
    "webpack-dev-server": "^2.11.2"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.15",
    "react-hot-loader": "^4.1.2",
    "babel-core": "^6.18.2",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "eslint": "^4.13.1",
    "eslint-plugin-react": "^7.5.1",
    "eslint-loader": "^1.9.0",
    "eslint-watch": "^3.1.3",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-flowtype": "^2.40.1",
    "uglifyjs-webpack-plugin2": "^1.0.3"
  }
}