diff --git a/packages/grafana-toolkit/package.json b/packages/grafana-toolkit/package.json
index 08331102a4f..bdc90c75e85 100644
--- a/packages/grafana-toolkit/package.json
+++ b/packages/grafana-toolkit/package.json
@@ -43,6 +43,7 @@
     "file-loader": "^4.0.0",
     "glob": "^7.1.4",
     "html-loader": "0.5.5",
+    "html-webpack-plugin": "^3.2.0",
     "inquirer": "^6.3.1",
     "jest": "24.8.0",
     "jest-cli": "^24.8.0",
diff --git a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
index 5e48b2d3a66..c654d6cb067 100644
--- a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
+++ b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
@@ -5,6 +5,7 @@ const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 import * as webpack from 'webpack';
 import { getStyleLoaders, getStylesheetEntries, getFileLoaders } from './webpack/loaders';
@@ -116,6 +117,8 @@ export const getWebpackConfig: WebpackConfigurationGetter = options => {
 
   if (options.production) {
     optimization.minimizer = [new TerserPlugin(), new OptimizeCssAssetsPlugin()];
+  } else if (options.watch) {
+    plugins.push(new HtmlWebpackPlugin());
   }
 
   return {