Build system: upgrade webpack (#7935)

* Upgrade webpack to 5; gulp build works

* Fix karma, except events

* Uniform access to events, import * or require (import * from 'events.js' / import events from 'events.js' return different objects, which is a problem for stubbing)

* Fix (?) adapters that use `this` inappropriately

* Update webpack-bundle-analyzer

* Fix warnings

* Enable tree shaking

* Set webpack mode 'none' (or else tests fail (!))

* Update coreJS version in babelrc - #7943

* Use babel to translate to commonjs only for unit tests; enable production mode

* Merge master

* Add fsevents as optional dep

Author: dgirardi

.babelrc.js

@@ -1,26 +1 @@
-
-let path = require('path');
-
-function useLocal(module) {
-  return require.resolve(module, {
-    paths: [
-      __dirname
-    ]
-  })
-}
-
-module.exports = {
-  "presets": [
-    [
-      useLocal('@babel/preset-env'),
-      {
-        "useBuiltIns": "entry",
-        "corejs": "3.13.0"
-      }
-    ]
-  ],
-  "plugins": [
-    path.resolve(__dirname, './plugins/pbjsGlobals.js'),
-    useLocal('babel-plugin-transform-object-assign')
-  ]
-};
+module.exports = require('./babelConfig.js')();

babelConfig.js

@@ -0,0 +1,30 @@
+
+let path = require('path');
+
+function useLocal(module) {
+  return require.resolve(module, {
+    paths: [
+      __dirname
+    ]
+  })
+}
+
+module.exports = function (test = false) {
+  return {
+    'presets': [
+      [
+        useLocal('@babel/preset-env'),
+        {
+          'useBuiltIns': 'entry',
+          'corejs': '3.13.0',
+          // a lot of tests use sinon.stub & others that stopped working on ES6 modules with webpack 5
+          'modules': test ? 'commonjs' : 'auto',
+        }
+      ]
+    ],
+    'plugins': [
+      path.resolve(__dirname, './plugins/pbjsGlobals.js'),
+      useLocal('babel-plugin-transform-object-assign'),
+    ],
+  }
+}

gulpfile.js

@@ -8,7 +8,6 @@ var gutil = require('gulp-util');
 var connect = require('gulp-connect');
 var webpack = require('webpack');
 var webpackStream = require('webpack-stream');
-var terser = require('gulp-terser');
 var gulpClean = require('gulp-clean');
 var KarmaServer = require('karma').Server;
 var karmaConfMaker = require('./karma.conf.maker.js');
@@ -117,7 +116,10 @@ viewReview.displayName = 'view-review';
 
 function makeDevpackPkg() {
   var cloned = _.cloneDeep(webpackConfig);
-  cloned.devtool = 'source-map';
+  Object.assign(cloned, {
+    devtool: 'source-map',
+    mode: 'development'
+  })
   var externalModules = helpers.getArgModules();
 
   const analyticsSources = helpers.getAnalyticsSources();
@@ -142,7 +144,6 @@ function makeWebpackPkg() {
   return gulp.src([].concat(moduleSources, analyticsSources, 'src/prebid.js'))
     .pipe(helpers.nameModules(externalModules))
     .pipe(webpackStream(cloned, webpack))
-    .pipe(terser())
     .pipe(gulpif(file => file.basename === 'prebid-core.js', header(banner, { prebid: prebid })))
     .pipe(gulp.dest('build/dist'));
 }

karma.conf.maker.js

@@ -2,6 +2,7 @@
 //
 // For more information, see http://karma-runner.github.io/1.0/config/configuration-file.html
 
+const babelConfig = require('./babelConfig.js');
 var _ = require('lodash');
 var webpackConf = require('./webpack.conf.js');
 var karmaConstants = require('karma').constants;
@@ -10,10 +11,19 @@ function newWebpackConfig(codeCoverage) {
   // Make a clone here because we plan on mutating this object, and don't want parallel tasks to trample each other.
   var webpackConfig = _.cloneDeep(webpackConf);
 
-  // remove optimize plugin for tests
-  webpackConfig.plugins.pop()
+  Object.assign(webpackConfig, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+  });
 
-  webpackConfig.devtool = 'inline-source-map';
+  delete webpackConfig.entry;
+
+  webpackConfig.module.rules
+    .flatMap((r) => r.use)
+    .filter((use) => use.loader === 'babel-loader')
+    .forEach((use) => {
+      use.options = babelConfig(true);
+    });
 
   if (codeCoverage) {
     webpackConfig.module.rules.push({

modules/dfpAdServerVideo.js

@@ -9,7 +9,7 @@ import { config } from '../src/config.js';
 import { getHook, submodule } from '../src/hook.js';
 import { auctionManager } from '../src/auctionManager.js';
 import { gdprDataHandler, uspDataHandler } from '../src/adapterManager.js';
-import events from '../src/events.js';
+import * as events from '../src/events.js';
 import CONSTANTS from '../src/constants.json';
 
 /**

modules/gdprEnforcement.js

@@ -9,7 +9,7 @@ import {find, includes} from '../src/polyfill.js';
 import {registerSyncInner} from '../src/adapters/bidderFactory.js';
 import {getHook} from '../src/hook.js';
 import {validateStorageEnforcement} from '../src/storageManager.js';
-import events from '../src/events.js';
+import * as events from '../src/events.js';
 import CONSTANTS from '../src/constants.json';
 
 const TCF2 = {

modules/id5AnalyticsAdapter.js

@@ -3,7 +3,7 @@ import CONSTANTS from '../src/constants.json';
 import adapterManager from '../src/adapterManager.js';
 import { ajax } from '../src/ajax.js';
 import { logInfo, logError } from '../src/utils.js';
-import events from '../src/events.js';
+import * as events from '../src/events.js';
 
 const {
   EVENTS: {

modules/ixBidAdapter.js

@@ -20,7 +20,7 @@ import {BANNER, VIDEO} from '../src/mediaTypes.js';
 import {config} from '../src/config.js';
 import CONSTANTS from '../src/constants.json';
 import {getStorageManager, validateStorageEnforcement} from '../src/storageManager.js';
-import events from '../src/events.js';
+import * as events from '../src/events.js';
 import {find, includes} from '../src/polyfill.js';
 import {registerBidder} from '../src/adapters/bidderFactory.js';
 import {INSTREAM, OUTSTREAM} from '../src/video.js';

modules/multibid/index.js

@@ -8,7 +8,7 @@ import {setupBeforeHookFnOnce, getHook} from '../../src/hook.js';
 import {
   logWarn, deepAccess, getUniqueIdentifierStr, deepSetValue, groupBy
 } from '../../src/utils.js';
-import events from '../../src/events.js';
+import * as events from '../../src/events.js';
 import CONSTANTS from '../../src/constants.json';
 import {addBidderRequests} from '../../src/auction.js';
 import {getHighestCpmBidsFromBidPool, sortByDealAndPriceBucketOrCpm} from '../../src/targeting.js';

modules/prebidServerBidAdapter/index.js

@@ -33,7 +33,7 @@ import adapterManager from '../../src/adapterManager.js';
 import { config } from '../../src/config.js';
 import { VIDEO, NATIVE } from '../../src/mediaTypes.js';
 import { isValid } from '../../src/adapters/bidderFactory.js';
-import events from '../../src/events.js';
+import * as events from '../../src/events.js';
 import {find, includes} from '../../src/polyfill.js';
 import { S2S_VENDORS } from './config.js';
 import { ajax } from '../../src/ajax.js';

modules/priceFloors.js

@@ -17,7 +17,7 @@ import {
 import {getGlobal} from '../src/prebidGlobal.js';
 import {config} from '../src/config.js';
 import {ajaxBuilder} from '../src/ajax.js';
-import events from '../src/events.js';
+import * as events from '../src/events.js';
 import CONSTANTS from '../src/constants.json';
 import {getHook} from '../src/hook.js';
 import {createBid} from '../src/bidfactory.js';

modules/pubCommonId.js

@@ -5,7 +5,7 @@
  */
 import { logMessage, parseUrl, buildUrl, triggerPixel, generateUUID, isArray } from '../src/utils.js';
 import { config } from '../src/config.js';
-import events from '../src/events.js';
+import * as events from '../src/events.js';
 import CONSTANTS from '../src/constants.json';
 import { getStorageManager } from '../src/storageManager.js';
 

modules/rtdModule/index.js

@@ -154,7 +154,7 @@
 import {config} from '../../src/config.js';
 import {module} from '../../src/hook.js';
 import {logError, logInfo, logWarn} from '../../src/utils.js';
-import events from '../../src/events.js';
+import * as events from '../../src/events.js';
 import CONSTANTS from '../../src/constants.json';
 import {gdprDataHandler, uspDataHandler} from '../../src/adapterManager.js';
 import {find} from '../../src/polyfill.js';

modules/talkadsBidAdapter.js

@@ -17,7 +17,7 @@ export const spec = {
    * @param poBid  The bid params to validate.
    * @return boolean True if this is a valid bid, and false otherwise.
    */
-  isBidRequestValid: (poBid) => {
+  isBidRequestValid: function (poBid) {
     utils.logInfo('isBidRequestValid : ', poBid);
     if (poBid.params === undefined) {
       utils.logError('VALIDATION FAILED : the parameters must be defined');
@@ -42,7 +42,7 @@ export const spec = {
    * @param poBidderRequest
    * @return ServerRequest Info describing the request to the server.
    */
-  buildRequests: (paValidBidRequests, poBidderRequest) => {
+  buildRequests: function (paValidBidRequests, poBidderRequest) {
     utils.logInfo('buildRequests : ', paValidBidRequests, poBidderRequest);
     const laBids = paValidBidRequests.map((poBid, piId) => {
       const loOne = { id: piId, ad_unit: poBid.adUnitCode, bid_id: poBid.bidId, type: '', size: [] };
@@ -118,7 +118,7 @@ export const spec = {
    *
    * @param poBid The bid that won the auction
    */
-  onBidWon: (poBid) => {
+  onBidWon: function (poBid) {
     utils.logInfo('onBidWon : ', poBid);
     if (poBid.pbid) {
       ajax(this.params.bidder_url + 'won/' + poBid.pbid);

modules/userId/index.js

@@ -132,7 +132,7 @@
 
 import {find, includes} from '../../src/polyfill.js';
 import {config} from '../../src/config.js';
-import events from '../../src/events.js';
+import * as events from '../../src/events.js';
 import {getGlobal} from '../../src/prebidGlobal.js';
 import {gdprDataHandler} from '../../src/adapterManager.js';
 import CONSTANTS from '../../src/constants.json';

modules/userIdTargeting.js

@@ -1,7 +1,7 @@
 import {config} from '../src/config.js';
 import {getGlobal} from '../src/prebidGlobal.js';
 import CONSTANTS from '../src/constants.json';
-import events from '../src/events.js';
+import * as events from '../src/events.js';
 import { isStr, isPlainObject, isBoolean, isFn, hasOwn, logInfo } from '../src/utils.js';
 
 const MODULE_NAME = 'userIdTargeting';