From 24884154dc0f0eb53156cba0476aa51bf3586801 Mon Sep 17 00:00:00 2001 From: Jack Westbrook Date: Wed, 25 Jun 2025 13:00:54 +0200 Subject: [PATCH] Plugin Configs: Update webpack config (#107133) feat(plugin-configs): use dynamic publicPath with decoupled plugins for cdn support --- packages/grafana-plugin-configs/package.json | 4 +- .../grafana-plugin-configs/webpack.config.ts | 59 ++++++++++++++++++- yarn.lock | 25 +++++++- 3 files changed, 83 insertions(+), 5 deletions(-) diff --git a/packages/grafana-plugin-configs/package.json b/packages/grafana-plugin-configs/package.json index d61b57c8166..f46b55fe6a4 100644 --- a/packages/grafana-plugin-configs/package.json +++ b/packages/grafana-plugin-configs/package.json @@ -16,11 +16,13 @@ "eslint-webpack-plugin": "4.2.0", "fork-ts-checker-webpack-plugin": "9.0.2", "glob": "11.0.1", + "imports-loader": "^5.0.0", "replace-in-file-webpack-plugin": "1.0.6", "swc-loader": "0.2.6", "typescript": "5.7.3", "webpack": "5.97.1", - "webpack-bundle-analyzer": "^4.10.2" + "webpack-bundle-analyzer": "^4.10.2", + "webpack-virtual-modules": "^0.6.2" }, "packageManager": "yarn@4.9.2" } diff --git a/packages/grafana-plugin-configs/webpack.config.ts b/packages/grafana-plugin-configs/webpack.config.ts index 0f16eea2503..7714093000a 100644 --- a/packages/grafana-plugin-configs/webpack.config.ts +++ b/packages/grafana-plugin-configs/webpack.config.ts @@ -4,8 +4,10 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import path from 'path'; // @ts-expect-error - there are no types for this package import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin'; -import { Configuration } from 'webpack'; +import TerserPlugin from 'terser-webpack-plugin'; +import { type Configuration, BannerPlugin } from 'webpack'; import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; +import VirtualModulesPlugin from 'webpack-virtual-modules'; import { DIST_DIR } from './constants'; import { getPackageJson, getPluginJson, getEntries, hasLicense } from './utils'; @@ -30,8 +32,24 @@ function skipFiles(f: string): boolean { return true; } -const config = async (env: Record): Promise => { +type Env = { + [key: string]: true | string | Env; +}; + +const config = async (env: Env): Promise => { const pluginJson = getPluginJson(); + // Inject module + const virtualPublicPath = new VirtualModulesPlugin({ + 'node_modules/grafana-public-path.js': ` + import amdMetaModule from 'amd-module'; + + __webpack_public_path__ = + amdMetaModule && amdMetaModule.uri + ? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1) + : 'public/plugins/${pluginJson.id}/'; + `, + }); + const baseConfig: Configuration = { cache: { type: 'filesystem', @@ -48,6 +66,8 @@ const config = async (env: Record): Promise => { entry: await getEntries(), externals: [ + // Required for dynamic publicPath resolution + { 'amd-module': 'module' }, 'lodash', 'jquery', 'moment', @@ -89,6 +109,18 @@ const config = async (env: Record): Promise => { module: { rules: [ + // This must come first in the rules array otherwise it breaks sourcemaps. + { + test: /module\.tsx?$/, + use: [ + { + loader: require.resolve('imports-loader'), + options: { + imports: `side-effects grafana-public-path`, + }, + }, + ], + }, { exclude: /(node_modules)/, test: /\.[tj]sx?$/, @@ -158,7 +190,30 @@ const config = async (env: Record): Promise => { uniqueName: pluginJson.id, }, + optimization: { + minimize: Boolean(env.production), + minimizer: [ + new TerserPlugin({ + terserOptions: { + format: { + comments: (_, { type, value }) => type === 'comment2' && value.trim().startsWith('[create-plugin]'), + }, + compress: { + drop_console: ['log', 'info'], + }, + }, + }), + ], + }, + plugins: [ + virtualPublicPath, + // Insert create plugin version information into the bundle so Grafana will load from cdn with script tags. + new BannerPlugin({ + banner: '/* [create-plugin] version: 5.22.0 */', + raw: true, + entryOnly: true, + }), new CopyWebpackPlugin({ patterns: [ // To `compiler.options.output` diff --git a/yarn.lock b/yarn.lock index ab65542ead0..3aaf44766e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3332,12 +3332,14 @@ __metadata: eslint-webpack-plugin: "npm:4.2.0" fork-ts-checker-webpack-plugin: "npm:9.0.2" glob: "npm:11.0.1" + imports-loader: "npm:^5.0.0" replace-in-file-webpack-plugin: "npm:1.0.6" swc-loader: "npm:0.2.6" tslib: "npm:2.8.1" typescript: "npm:5.7.3" webpack: "npm:5.97.1" webpack-bundle-analyzer: "npm:^4.10.2" + webpack-virtual-modules: "npm:^0.6.2" languageName: unknown linkType: soft @@ -19402,6 +19404,18 @@ __metadata: languageName: node linkType: hard +"imports-loader@npm:^5.0.0": + version: 5.0.0 + resolution: "imports-loader@npm:5.0.0" + dependencies: + source-map-js: "npm:^1.0.2" + strip-comments: "npm:^2.0.1" + peerDependencies: + webpack: ^5.0.0 + checksum: 10/b507436b7d2c7a6d6d8623b93b5a0fda2d13c48d4d0f310b74b8465c080d9fd07a2f8d0f896e264b4feff59effa9aef736a2b668d7a695cecd8bdc7cb817373e + languageName: node + linkType: hard + "imurmurhash@npm:^0.1.4": version: 0.1.4 resolution: "imurmurhash@npm:0.1.4" @@ -29362,7 +29376,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.1": version: 1.2.1 resolution: "source-map-js@npm:1.2.1" checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3 @@ -29977,6 +29991,13 @@ __metadata: languageName: node linkType: hard +"strip-comments@npm:^2.0.1": + version: 2.0.1 + resolution: "strip-comments@npm:2.0.1" + checksum: 10/43ea36189e4ba543c6ffb0384831e9e23c3b57ede5592c6edcbfc883f489f91d00328fe2670b4e467f61c7886eff68deae3e946f0f092346b2b3cb058b9cfdba + languageName: node + linkType: hard + "strip-final-newline@npm:^2.0.0": version: 2.0.0 resolution: "strip-final-newline@npm:2.0.0" @@ -32345,7 +32366,7 @@ __metadata: languageName: node linkType: hard -"webpack-virtual-modules@npm:^0.6.0": +"webpack-virtual-modules@npm:^0.6.0, webpack-virtual-modules@npm:^0.6.2": version: 0.6.2 resolution: "webpack-virtual-modules@npm:0.6.2" checksum: 10/d9a0d035f7ec0c7f1055aaf88bfe48b7f96458043916a1b2926d9012fd61de3810a6b768e31a8cd4b3c84a9b6d55824361a9dd20aaf9f5ccfb6f017af216a178