我骑着那些关于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和backed /Typescript/webpack应用程序的可能性。
这是我们的架构(快捷方式)。
mainmodule
backendModules <- those modules are just maven project have theirs poms and etc
backendModule1
backendModule2
fontendModule
content <- React/Typescript/Webpack/Less etcbackendModule2 --我们使用它来启动后端backendModule1 --只是一些额外的服务--fontendModule/backendModule1--是我们的整个反应应用程序
如果我说我们的前端文件需要重新加载,我说得对吗?
我的问题是,为了强制重新加载前端文件,我必须做些什么?所以开发人员只需要运行一个应用程序,然后后端+前端就会自动重新加载。
有人能做到吗?我们没有收到任何错误等等..。
如果有什么不清楚的地方,请告诉我,这样我们就可以澄清
发布于 2018-04-27 06:11:30
我知道有两种不同的方法可以做到这一点。
1)使用Intellij文件监视插件
2)将webpack dev服务器作为春启动应用程序的反向代理运行。
1)
现在,如果在定义的范围内保存文件,webpack任务将运行。之后,您必须在浏览器中刷新页面。是从https://intellij-support.jetbrains.com那里得到的
2)这种方式更先进,但更难正确配置。您将拥有自动重新加载(页面刷新)和完全热重加载(反应状态保持不变)。
其基本思想是运行webpack开发服务器,并使用该服务器作为春季引导后端的反向代理。开发服务器将自己处理对热重加载内容的请求,并将所有其他内容传递给后端。是从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"
}
}
const { resolve } = require('path');
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: resolve(__dirname, '.'),
entry: [
'react-hot-loader/patch',
// activate HMR for React
'webpack-dev-server/client?http://localhost:8888',
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
// the entry point of our app
'./src/main/js/router/mainrouter.jsx',
],
output: {
filename: './mainbundle.js',
// the output bundle
path: resolve(__dirname, '/src/main/resources/static/js/bundled'),
publicPath: '/js/bundled/',
// necessary for HMR to know where to load the hot update chunks
},
devtool: 'sourcemaps',
devServer: {
hot: true,
contentBase: [resolve(__dirname, "."), resolve(__dirname, "./src/main/resources/static/js/bundled")],
proxy: {
"/": {
target: {
host: "localhost",
protocol: 'http:',
port: 8087,
},
},
ignorePath: true,
changeOrigin: true,
secure: false,
},
publicPath: '/js/bundled/',
port: 8888,
host: "localhost",
},
module: {
rules: [
{
enforce: "pre",
test: /\.jsx$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// fix: true, // autofix
cache: true,
failOnError: false,
emitWarning: true,
quiet: true,
},
},
{
test: path.join(__dirname, '.'),
exclude: /node_modules/,
loader: "babel-loader",
query: {
// cacheDirectory: true,
presets: ['es2015', 'react'],
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader?modules'],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
],
};
春季引导应用程序运行在:8087,webpack开发服务器在8888上运行。现在,在您的index.html中包含了mainbundle.js。运行您的spring引导应用程序,并在第二个终端运行:
npm run start:dev在:8888上访问网页,以便在文件更改时进行热重新加载。
https://stackoverflow.com/questions/49888724
复制相似问题