Chore: Setup live reloading (#97248)

* setup live reloading

* put live-reloading behind cli flag, remove webpack.hot.js

* use env.liveReload

* fix lint

---------

Co-authored-by: joshhunt <josh@trtr.co>

scripts/webpack/webpack.dev.js

@@ -8,6 +8,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const { DefinePlugin, EnvironmentPlugin } = require('webpack');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
+const LiveReloadPlugin = require('webpack-livereload-plugin');
 const { merge } = require('webpack-merge');
 const WebpackBar = require('webpackbar');
 
@@ -105,6 +106,17 @@ module.exports = (env = {}) => {
     },
 
     plugins: [
+      ...(parseInt(env.liveReload, 10)
+        ? [
+            new LiveReloadPlugin({
+              appendScriptTag: true,
+              useSourceHash: true,
+              hostname: 'localhost',
+              protocol: 'http',
+              port: 35750,
+            }),
+          ]
+        : []),
       parseInt(env.noTsCheck, 10)
         ? new DefinePlugin({}) // bogus plugin to satisfy webpack API
         : new ForkTsCheckerWebpackPlugin({

scripts/webpack/webpack.hot.js

@@ -1,91 +0,0 @@
-'use strict';
-
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
-const { DefinePlugin } = require('webpack');
-const { merge } = require('webpack-merge');
-
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  devtool: 'inline-source-map',
-  mode: 'development',
-
-  entry: {
-    app: ['./public/app/index.ts'],
-    dark: './public/sass/grafana.dark.scss',
-    light: './public/sass/grafana.light.scss',
-  },
-
-  watchOptions: {
-    ignored: /node_modules/,
-  },
-
-  devServer: {
-    devMiddleware: {
-      writeToDisk: true,
-    },
-    historyApiFallback: true,
-    hot: true,
-    open: false,
-    port: 3333,
-    proxy: [
-      {
-        context: '!/public/build',
-        target: 'http://localhost:3000',
-      },
-    ],
-    static: {
-      publicPath: '/public/build/',
-    },
-  },
-
-  module: {
-    // Note: order is bottom-to-top and/or right-to-left
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-            cacheCompression: false,
-          },
-        },
-        exclude: /node_modules/,
-        include: [path.resolve(__dirname, '../../public/'), path.resolve(__dirname, '../../packages/')],
-      },
-      require('./sass.rule.js')({
-        sourceMap: false,
-        preserveUrl: false,
-      }),
-    ],
-  },
-
-  // https://webpack.js.org/guides/build-performance/#output-without-path-info
-  output: {
-    filename: '[name].js',
-    pathinfo: false,
-  },
-
-  // https://webpack.js.org/guides/build-performance/#avoid-extra-optimization-steps
-  optimization: {
-    runtimeChunk: true,
-    removeAvailableModules: false,
-    removeEmptyChunks: false,
-    splitChunks: false,
-  },
-
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'grafana.[name].[contenthash].css',
-    }),
-    new ReactRefreshWebpackPlugin(),
-    new DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('development'),
-      },
-    }),
-  ],
-});