Plugins: Always load decoupled frontend assets from builds (#81873)

* Wip

* Wip

* Adapt to load external module

* build: remove cloudmonitoring from built_in_plugins, clean up webpack output

* chore(plugins): remove decoupled plugins from package.json deps

* chore(codeowners): update file for nx.json

* revert(webpack): put back path in config

* build(frontend): use nx to run prod builds of decoupled plugins with yarn build

* style(prometheus): run prettier-write to fix tsconfig.json

* style(backend): remove unused subFile.isDistDir

* revert(locales): remove formatting changes adding new line at end of files

* chore(webpack): clean up dev output

* build(nx): make grafana an nx project, bump lerna and nx

* build(plugin-configs): move cache directory to node_modules

* style(datasource-plugins): add eslint ignore for .gen.ts files

* chore(codeowners): add frontend-ops as owner of project.json

* build(webpack): add getDecoupledPlugins to automatically ignore when watching

* ci(drone): skip nx cache when building frontend packages

* style(ci): fix missing trailing comma

* Revert "style(ci): fix missing trailing comma"

This reverts commit 7520d41576.

* Revert "ci(drone): skip nx cache when building frontend packages"

This reverts commit 46938883ac.

* feat(zipkin): remove from grafana core bundle

* chore(npm): bump nx package to latest 18.0.8

* docs(dev-guide): add a note about what yarn start now builds

---------

Co-authored-by: Andres Martinez <andres.martinez@grafana.com>

scripts/webpack/webpack.dev.js

@@ -1,5 +1,5 @@
 'use strict';
-
+const { getPackagesSync } = require('@manypkg/get-packages');
 const browserslist = require('browserslist');
 const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
 const ESLintPlugin = require('eslint-webpack-plugin');
@@ -9,6 +9,7 @@ const path = require('path');
 const { DefinePlugin } = require('webpack');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
 const { merge } = require('webpack-merge');
+const WebpackBar = require('webpackbar');
 
 const common = require('./webpack.common.js');
 const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
@@ -19,6 +20,12 @@ const esbuildOptions = {
   format: undefined,
 };
 
+// To speed up webpack and prevent unnecessary rebuilds we ignore decoupled packages
+function getDecoupledPlugins() {
+  const { packages } = getPackagesSync(process.cwd());
+  return packages.filter((pkg) => pkg.dir.includes('plugins/datasource')).map((pkg) => `${pkg.dir}/**`);
+}
+
 module.exports = (env = {}) => {
   return merge(common, {
     devtool: 'source-map',
@@ -32,7 +39,7 @@ module.exports = (env = {}) => {
 
     // If we enabled watch option via CLI
     watchOptions: {
-      ignored: /node_modules/,
+      ignored: ['/node_modules/', ...getDecoupledPlugins()],
     },
 
     resolve: {
@@ -64,6 +71,8 @@ module.exports = (env = {}) => {
       ],
     },
 
+    // infrastructureLogging: { level: 'error' },
+
     // https://webpack.js.org/guides/build-performance/#output-without-path-info
     output: {
       pathinfo: false,
@@ -121,6 +130,12 @@ module.exports = (env = {}) => {
         integrity: true,
         publicPath: true,
       }),
+      new WebpackBar({
+        color: '#eb7b18',
+        name: 'Grafana',
+      }),
     ],
+
+    stats: 'minimal',
   });
 };