refactor(bundler-tests): split webpack tests into webpack-4 and webpack-5 (#6098)

overbalance · web-flow · commit 823251fe7f32 · 2025-11-13T12:34:04.000Z
diff --git a/.gitignore b/.gitignore
@@ -38,7 +38,10 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+
+# Output directories
 build/
+dist/
 
 # TypeScript v1 declaration files
 typings/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,8 @@ For notes on migrating to 2.x / 0.200.x see [the upgrade guide](doc/upgrade-to-2
 
 ### :house: Internal
 
+* refactor(bundler-tests): split webpack tests into webpack-4 and webpack-5 [#6098](https://github.com/open-telemetry/opentelemetry-js/pull/6098) @overbalance
+
 ## 2.2.0
 
 ### :bug: Bug Fixes
diff --git a/bundler-tests/browser/webpack-4/.npmrc b/bundler-tests/browser/webpack-4/.npmrc
@@ -0,0 +1,2 @@
+package-lock=false
+install-links=false
diff --git a/bundler-tests/browser/webpack-4/index.html b/bundler-tests/browser/webpack-4/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>OpenTelemetry example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body>
+    Example of using the OpenTelemetry Logs SDK
+    <br />
+    <button id="emit-event-button">Emit event</button>
+  </body>
+</html>
diff --git a/bundler-tests/browser/webpack-4/package.json b/bundler-tests/browser/webpack-4/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "webpack-4-bundle-test",
+  "private": true,
+  "version": "0.208.0",
+  "description": "Test app for logs in webpack 4",
+  "type": "module",
+  "scripts": {
+    "test:bundle": "npm i && webpack --config webpack.config.mjs",
+    "start": "npm i && webpack serve --config webpack.config.mjs --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/open-telemetry/opentelemetry-js.git"
+  },
+  "keywords": [
+    "opentelemetry",
+    "web",
+    "events"
+  ],
+  "engines": {
+    "node": "^18.19.0 || >=20.6.0"
+  },
+  "author": "OpenTelemetry Authors",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/open-telemetry/opentelemetry-js/issues"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "babel-loader": "^8.0.0",
+    "html-webpack-plugin": "^4.5.2",
+    "webpack": "^4",
+    "webpack-cli": "^4",
+    "webpack-dev-server": "^4"
+  },
+  "dependencies": {
+    "@opentelemetry/api": "file:../../../api",
+    "@opentelemetry/api-logs": "file:../../../experimental/packages/api-logs",
+    "@opentelemetry/exporter-logs-otlp-http": "file:../../../experimental/packages/exporter-logs-otlp-http",
+    "@opentelemetry/sdk-logs": "file:../../../experimental/packages/sdk-logs"
+  },
+  "homepage": "https://github.com/open-telemetry/opentelemetry-js/tree/main/bundler-tests/browser/webpack-4"
+}
diff --git a/bundler-tests/browser/webpack-4/project.json b/bundler-tests/browser/webpack-4/project.json
@@ -0,0 +1,3 @@
+{
+  "name": "webpack-4-bundle-test"
+}
diff --git a/bundler-tests/browser/webpack-4/src/index.js b/bundler-tests/browser/webpack-4/src/index.js
diff --git a/bundler-tests/browser/webpack-4/src/opentelemetry.js b/bundler-tests/browser/webpack-4/src/opentelemetry.js
@@ -0,0 +1,25 @@
+import { logs } from '@opentelemetry/api-logs';
+import { diag, DiagConsoleLogger } from '@opentelemetry/api';
+import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
+import {
+  LoggerProvider,
+  SimpleLogRecordProcessor,
+} from '@opentelemetry/sdk-logs';
+
+export function setupOpenTelemetry() {
+  // setup diagnostics
+  diag.setLogger({
+    logger: new DiagConsoleLogger(),
+    options: {
+      logLevel: 'info',
+    },
+  });
+
+  // setup logs
+  logs.setGlobalLoggerProvider(
+    new LoggerProvider({
+      // SimpleLogRecordProcessor is for testing only, do not use in production.
+      processors: [new SimpleLogRecordProcessor(new OTLPLogExporter())],
+    })
+  );
+}
diff --git a/bundler-tests/browser/webpack-4/webpack.config.mjs b/bundler-tests/browser/webpack-4/webpack.config.mjs
@@ -0,0 +1,48 @@
+import { fileURLToPath } from 'url';
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('./node_modules/@types/webpack').Configuration} */
+export default {
+  mode: 'development',
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  resolve: {
+    alias: {
+      // Webpack 4 doesn't support package.json exports field, so we need to manually map the browser-http subpath
+      '@opentelemetry/otlp-exporter-base/browser-http':
+        '@opentelemetry/otlp-exporter-base/build/esm/index-browser-http.js',
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(?:js|mjs|cjs)$/,
+        // Include OpenTelemetry ES2022 packages for transpilation
+        exclude: /node_modules\/(?!@opentelemetry)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env']],
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    static: {
+      directory: path.resolve(__dirname, 'dist/'),
+    },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Development',
+      template: 'index.html',
+    }),
+  ],
+};
diff --git a/bundler-tests/browser/webpack-5/.npmrc b/bundler-tests/browser/webpack-5/.npmrc
@@ -0,0 +1,2 @@
+package-lock=false
+install-links=false
diff --git a/bundler-tests/browser/webpack-5/index.html b/bundler-tests/browser/webpack-5/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>OpenTelemetry example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body>
+    Example of using the OpenTelemetry Logs SDK
+    <br />
+    <button id="emit-event-button">Emit event</button>
+  </body>
+</html>
diff --git a/bundler-tests/browser/webpack-5/package.json b/bundler-tests/browser/webpack-5/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "webpack-5-bundle-test",
+  "private": true,
+  "version": "0.208.0",
+  "description": "Test app for logs in webpack 5",
+  "type": "module",
+  "scripts": {
+    "test:bundle": "npm i && webpack --config webpack.config.mjs",
+    "start": "npm i && webpack serve --config webpack.config.mjs --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/open-telemetry/opentelemetry-js.git"
+  },
+  "keywords": [
+    "opentelemetry",
+    "web",
+    "events"
+  ],
+  "engines": {
+    "node": "^18.19.0 || >=20.6.0"
+  },
+  "author": "OpenTelemetry Authors",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/open-telemetry/opentelemetry-js/issues"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^5",
+    "webpack": "^5",
+    "webpack-cli": "^6",
+    "webpack-dev-server": "^5"
+  },
+  "dependencies": {
+    "@opentelemetry/api": "file:../../../api",
+    "@opentelemetry/api-logs": "file:../../../experimental/packages/api-logs",
+    "@opentelemetry/exporter-logs-otlp-http": "file:../../../experimental/packages/exporter-logs-otlp-http",
+    "@opentelemetry/sdk-logs": "file:../../../experimental/packages/sdk-logs"
+  },
+  "homepage": "https://github.com/open-telemetry/opentelemetry-js/tree/main/bundler-tests/browser/webpack-5"
+}
diff --git a/bundler-tests/browser/webpack-5/project.json b/bundler-tests/browser/webpack-5/project.json
@@ -0,0 +1,3 @@
+{
+  "name": "webpack-5-bundle-test"
+}
diff --git a/bundler-tests/browser/webpack-5/src/index.js b/bundler-tests/browser/webpack-5/src/index.js
@@ -0,0 +1,16 @@
+import { setupOpenTelemetry } from './opentelemetry.js';
+import { logs } from '@opentelemetry/api-logs';
+
+// Setup SDK and register with API, then obtain logger from API.
+setupOpenTelemetry();
+const logger = logs.getLogger('bundle-test-webpack');
+
+console.log('loaded');
+const emitEventButton = document.getElementById('emit-event-button');
+emitEventButton.addEventListener('click', () => {
+  console.log('clicked');
+  logger.emit({
+    body: 'test-event-body',
+    eventName: 'custom.event',
+  });
+});
diff --git a/bundler-tests/browser/webpack-5/src/opentelemetry.js b/bundler-tests/browser/webpack-5/src/opentelemetry.js
@@ -0,0 +1,25 @@
+import { logs } from '@opentelemetry/api-logs';
+import { diag, DiagConsoleLogger } from '@opentelemetry/api';
+import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
+import {
+  LoggerProvider,
+  SimpleLogRecordProcessor,
+} from '@opentelemetry/sdk-logs';
+
+export function setupOpenTelemetry() {
+  // setup diagnostics
+  diag.setLogger({
+    logger: new DiagConsoleLogger(),
+    options: {
+      logLevel: 'info',
+    },
+  });
+
+  // setup logs
+  logs.setGlobalLoggerProvider(
+    new LoggerProvider({
+      // SimpleLogRecordProcessor is for testing only, do not use in production.
+      processors: [new SimpleLogRecordProcessor(new OTLPLogExporter())],
+    })
+  );
+}
diff --git a/bundler-tests/browser/webpack-5/webpack.config.mjs b/bundler-tests/browser/webpack-5/webpack.config.mjs
@@ -1,19 +1,26 @@
 import { fileURLToPath } from 'url';
 import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/** @type {import('./node_modules/@types/webpack').Configuration} */
 export default {
-  entry: './src/emit-event.js',
+  mode: 'development',
+  entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
-    clean: false
   },
   devServer: {
     static: {
       directory: path.resolve(__dirname, 'dist/'),
     },
   },
-  mode: 'development'
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Development',
+      template: 'index.html',
+    }),
+  ],
 };
diff --git a/bundler-tests/browser/webpack/.gitignore b/bundler-tests/browser/webpack/.gitignore
diff --git a/bundler-tests/browser/webpack/dist/index.html b/bundler-tests/browser/webpack/dist/index.html
diff --git a/bundler-tests/browser/webpack/package.json b/bundler-tests/browser/webpack/package.json
diff --git a/bundler-tests/browser/webpack/src/opentelemetry.js b/bundler-tests/browser/webpack/src/opentelemetry.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+package-lock=false`
	`2`	`+install-links=false`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "name": "webpack-4-bundle-test"`
	`3`	`+}`