chore: update to webpack 5 (#2269)

* chore: update webpack

* chore: sync package-lock.json

* chore: re-format deps

* fix: use correct api dependency, remove unused

* chore: remove unused codecov

* chore: remove unused deps

* chore: add assert package

* chore: remove more unused packages

* chore: remove more unused dependencies

Author: pichlermarc

examples/web/package.json

@@ -30,7 +30,7 @@
     "@babel/core": "^7.21.8",
     "babel-loader": "^8.3.0",
     "ts-loader": "^6.2.2",
-    "webpack": "^4.46.0",
+    "webpack": "5.89.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.3",
     "webpack-merge": "^4.2.2"

karma.base.js

@@ -19,13 +19,15 @@ module.exports = {
   hostname: 'localhost',
   browsers: ['ChromeHeadless'],
   frameworks: ['mocha'],
-  coverageIstanbulReporter: {
-    reports: ['json'],
-    dir: '.nyc_output',
-    fixWebpackSourcePaths: true
+  coverageReporter: {
+    type : 'json',
+    subdir: '.',
+    dir : '.nyc_output/'
   },
-  reporters: ['spec', 'coverage-istanbul'],
+  reporters: ['spec', 'coverage'],
   files: ['test/index-webpack.ts'],
-  preprocessors: { 'test/index-webpack.ts': ['webpack'] },
+  preprocessors: {
+    'test/index-webpack*.ts': ['webpack']
+  },
   webpackMiddleware: { noInfo: true }
 };

karma.webpack.js

@@ -14,33 +14,61 @@
  * limitations under the License.
  */
 
-const webpackNodePolyfills = require('./webpack.node-polyfills.js');
+const webpack = require('webpack')
 
 // This is the webpack configuration for browser Karma tests with coverage.
 module.exports = {
   mode: 'development',
   target: 'web',
-  output: { filename: 'bundle.js' },
-  resolve: { extensions: ['.ts', '.js', '.tsx'] },
-  devtool: 'inline-source-map',
+  output: {filename: 'bundle.js'},
+  resolve: {
+    extensions: ['.ts', '.js', '.tsx'],
+    fallback: {
+      // Enable the assert library polyfill because that is used in tests
+      "assert": require.resolve('assert/'),
+      "util": require.resolve('util/'),
+    },
+  },
+  devtool: 'eval-source-map',
+  plugins: [
+    new webpack.ProvidePlugin({
+      // Make a global `process` variable that points to the `process` package,
+      // because the `util` package expects there to be a global variable named `process`.
+      // Thanks to https://stackoverflow.com/a/65018686/14239942
+      // NOTE: I wish there was a better way as this pollutes the tests with a defined 'process' global.
+      process: 'process/browser'
+    })
+  ],
   module: {
     rules: [
       { test: /\.tsx?$/, use: 'ts-loader' },
+      {
+        test: /\.js$/,
+        exclude: {
+          and: [/node_modules/], // Exclude libraries in node_modules ...
+          not: [
+            // Except for a few of them that needs to be transpiled because they use modern syntax
+            /zone.js/,
+          ],
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          }
+        },
+      },
       {
         enforce: 'post',
         exclude: /(node_modules|\.test\.[tj]sx?$)/,
         test: /\.ts$/,
         use: {
-          loader: '@jsdevtools/coverage-istanbul-loader',
+          loader: 'babel-loader',
           options: {
-            produceSourceMap: false,
-            esModules: true
+            plugins: ['babel-plugin-istanbul'],
           }
-        }
+        },
       },
-      // This setting configures Node polyfills for the browser that will be
-      // added to the webpack bundle for Karma tests.
-      { parser: { node: webpackNodePolyfills } }
-    ]
-  }
+    ],
+  },
 };

metapackages/auto-instrumentations-web/package.json

@@ -35,30 +35,33 @@
     "zone.js": "^0.11.4 || ^0.13.0 || ^0.14.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.17",
-    "@jsdevtools/coverage-istanbul-loader": "3.0.5",
+    "@babel/core": "7.24.6",
+    "@babel/preset-env": "7.24.6",
     "@opentelemetry/api": "^1.3.0",
-    "@types/mocha": "8.2.3",
+    "@types/mocha": "10.0.6",
     "@types/node": "18.6.5",
-    "@types/sinon": "10.0.18",
-    "@types/webpack-env": "1.16.2",
-    "babel-loader": "8.2.2",
-    "karma": "6.3.16",
-    "karma-chrome-launcher": "^3.1.1",
-    "karma-coverage-istanbul-reporter": "3.0.3",
+    "@types/sinon": "17.0.3",
+    "@types/webpack-env": "1.16.3",
+    "assert": "2.0.0",
+    "babel-loader": "8.3.0",
+    "babel-plugin-istanbul": "6.1.1",
+    "cross-var": "1.1.0",
+    "karma": "6.4.3",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.2.1",
     "karma-mocha": "2.0.1",
     "karma-spec-reporter": "0.0.36",
-    "karma-webpack": "4.0.2",
-    "mocha": "7.2.0",
+    "karma-webpack": "5.0.1",
+    "mocha": "10.2.0",
     "nyc": "15.1.0",
     "rimraf": "5.0.5",
-    "sinon": "15.2.0",
-    "ts-loader": "8.3.0",
+    "sinon": "15.1.2",
+    "ts-loader": "9.5.1",
     "ts-mocha": "10.0.0",
     "typescript": "4.4.4",
-    "webpack": "4.46.0",
-    "webpack-cli": "4.7.2",
-    "webpack-merge": "5.8.0"
+    "webpack": "5.89.0",
+    "webpack-cli": "5.1.4",
+    "webpack-merge": "5.10.0"
   },
   "dependencies": {
     "@opentelemetry/instrumentation": "^0.52.0",