Build: watch and dev mode webpack improvements (#18153)

* Ignore `node_modules` in watch mode

* Simplify development setup

package.json

@@ -128,7 +128,7 @@
     "zone.js": "0.7.8"
     "zone.js": "0.7.8"
   },
   },
   "scripts": {
   "scripts": {
-    "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js",
+    "dev": "webpack --progress --colors --config scripts/webpack/webpack.dev.js",
     "start": "grafana-toolkit core:start --watchTheme",
     "start": "grafana-toolkit core:start --watchTheme",
     "start:hot": "grafana-toolkit core:start --hot --watchTheme",
     "start:hot": "grafana-toolkit core:start --hot --watchTheme",
     "start:ignoreTheme": "grafana-toolkit core:start --hot",
     "start:ignoreTheme": "grafana-toolkit core:start --hot",

packages/grafana-toolkit/src/cli/tasks/core.start.ts

@@ -15,11 +15,11 @@ const startTaskRunner: TaskRunner<StartTaskOptions> = async ({ watchThemes, hot
     },
     },
     hot
     hot
       ? {
       ? {
-          command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js',
+          command: 'webpack-dev-server --progress --colors --config scripts/webpack/webpack.hot.js',
           name: 'Dev server',
           name: 'Dev server',
         }
         }
       : {
       : {
-          command: 'webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js',
+          command: 'webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js',
           name: 'Webpack',
           name: 'Webpack',
         },
         },
   ];
   ];

scripts/webpack/webpack.dev.js

@@ -19,6 +19,11 @@ module.exports = merge(common, {
     light: './public/sass/grafana.light.scss',
     light: './public/sass/grafana.light.scss',
   },
   },
 
 
+  // If we enabled watch option via CLI
+  watchOptions: {
+    ignored: /node_modules/
+  },
+
   module: {
   module: {
     rules: [
     rules: [
       {
       {

scripts/webpack/webpack.hot.js

@@ -10,6 +10,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
 const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
 
 
 module.exports = merge(common, {
 module.exports = merge(common, {
+  mode: 'development',
   entry: {
   entry: {
     app: ['webpack-dev-server/client?http://localhost:3333', './public/app/dev.ts'],
     app: ['webpack-dev-server/client?http://localhost:3333', './public/app/dev.ts'],
   },
   },
@@ -34,6 +35,9 @@ module.exports = merge(common, {
     proxy: {
     proxy: {
       '!/public/build': 'http://localhost:3000',
       '!/public/build': 'http://localhost:3000',
     },
     },
+    watchOptions: {
+      ignored: /node_modules/
+    }
   },
   },
 
 
   optimization: {
   optimization: {