diff --git a/visualdl/frontend/tool/dev-client.js b/visualdl/frontend/tool/dev-client.js
new file mode 100644
index 0000000000000000000000000000000000000000..d882b7bf83be35b3fca65f4d790c7451120e35c9
--- /dev/null
+++ b/visualdl/frontend/tool/dev-client.js
@@ -0,0 +1,7 @@
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})
diff --git a/visualdl/frontend/tool/webpack.dev.config.js b/visualdl/frontend/tool/webpack.dev.config.js
index 7ddbc3127a82242410d3e12a5082cc045519291a..5b16958fafa422373ac0ba00075de5616d4d97ca 100644
--- a/visualdl/frontend/tool/webpack.dev.config.js
+++ b/visualdl/frontend/tool/webpack.dev.config.js
@@ -3,6 +3,11 @@ const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 let merge = require('webpack-merge');
 let baseWebpackConfig = require('./webpack.config');
 
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+    baseWebpackConfig.entry[name] = ['./tool/dev-client'].concat(baseWebpackConfig.entry[name]);
+});
+
 /**
  * dev config
  *