fix(tooling): replace Rollup with Webpack for bundling of meetings widget (webex#617)

Author: riteshfyi

packages/@webex/widgets/package.json

@@ -4,14 +4,14 @@
   "engines": {
     "node": ">=20.13.1"
   },
-  "main": "dist/webexWidgets.esm.js",
-  "module": "dist/webexWidgets.esm.js",
+  "main": "dist/webexWidgets.mjs",
+  "module": "dist/webexWidgets.mjs",
   "scripts": {
     "clean": "rm -rf dist && rm -rf node_modules",
     "clean:dist": "rm -rf dist",
-    "build:src": "yarn clean:dist && rollup -c",
-    "demo:serve": "webpack serve ./demo/App.jsx --mode development",
-    "demo:build": "webpack ./demo/App.jsx --mode production",
+    "build:src": "yarn clean:dist && webpack ./src/index.js --env buildType=dist --mode production",
+    "demo:serve": "webpack serve ./demo/App.jsx --env buildType=demo --mode development",
+    "demo:build": "webpack ./demo/App.jsx --env buildType=demo --mode development",
     "deploy:npm": "yarn npm publish",
     "release": "semantic-release",
     "release:debug": "semantic-release --debug",
@@ -55,11 +55,6 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@momentum-ui/react": "^23.21.4",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
     "@semantic-release/changelog": "^6.0.0",
     "@semantic-release/git": "^10.0.0",
     "@wdio/cli": "^7.3.1",
@@ -77,6 +72,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^3.4.2",
+    "css-minimizer-webpack-plugin": "^7.0.4",
     "dotenv": "^8.6.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -94,16 +90,13 @@
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^5.6.0",
     "husky": "^4.2.3",
+    "mini-css-extract-plugin": "^2.10.0",
     "os-browserify": "^0.3.0",
-    "postcss": "^8.2.13",
-    "postcss-url": "^10.1.3",
     "prettier": "^1.19.1",
     "prop-types": "^15.7.2",
     "querystring-es3": "^0.2.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "^2.59.0",
-    "rollup-plugin-postcss": "^4.0.0",
     "sass": "^1.83.1",
     "sass-loader": "^10.5.2",
     "semantic-release": "^18.0.0",

packages/@webex/widgets/rollup.config.js

@@ -2,36 +2,64 @@ const path = require('path');
 const webpack = require('webpack');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const {version} = require('./package.json');
+const merge = require('webpack-merge').merge;
+
+const baseConfigOriginal = require('../../../webpack.config');
+
+const resolveMonorepoRoot = (...segments) => path.resolve(__dirname, '../../../', ...segments);
+
+const {entry, ...baseConfig} = baseConfigOriginal;
+
+const outputConfig = {
+  dist: {
+    path: path.resolve(__dirname, './dist'),
+    filename: 'webexWidgets.mjs',
+    library: {
+      type: 'module',
+    },
+  },
+  demo: {
+    path: path.resolve(__dirname, './docs'),
+    filename: 'demo.bundle.[contenthash].js',
+  },
+};
 
 module.exports = function(env, argv) {
-  return {
+  const buildType = env.buildType;
+  const mode = argv.mode;
+  const isDemo = buildType === 'demo';
+  const isDist = buildType === 'dist';
+
+  const entryPoint = env.entry;
+
+  return merge(baseConfig, {
     cache: true,
-    output:
-      argv.mode === 'production'
-        ? {
-            path: path.resolve(__dirname, './docs'),
-            filename: 'demo.bundle.[hash].js',
-          }
-        : undefined, // Otherwise the CleanWebpackPlugin will wipe our build during devserver
-    devtool: argv.mode === 'production' ? 'source-map' : 'inline-source-map',
-    resolve: {
-      extensions: ['.js', '.jsx'],
-      fallback: {
-        "buffer": require.resolve("buffer/"),
-        "crypto": require.resolve("crypto-browserify"),
-        "os": require.resolve("os-browserify/browser"),
-        "stream": require.resolve("stream-browserify"),
-        "util": require.resolve("util/"),
-        "url": require.resolve("url/"),
-        "vm": require.resolve("vm-browserify"),
-        "querystring": require.resolve('querystring-es3'),
-        "fs": false
-      } /*
-         * In order to include polyfills for node.js core modules, we need to add a fallback 
-         * for the relevant packages as webpack 5 doesn't include them by default
-         */ 
-    },
+    entry: entryPoint,
+    output: outputConfig[buildType],
+
+    // Enable ESM output
+    experiments: isDist
+      ? {
+          outputModule: true,
+        }
+      : {},
+
+    devtool: mode === 'production' ? 'source-map' : 'inline-source-map',
+
+    externals: isDemo ? {} : ['prop-types', 'react', 'react-dom', 'webex', '@webex/common'],
+
+    // // CSS minimization for dist builds
+    optimization: isDist
+      ? {
+          minimizer: [
+            `...`, // Keep default JS minimizer
+            new CssMinimizerPlugin(),
+          ],
+        }
+      : {},
     module: {
       rules: [
         {
@@ -41,6 +69,20 @@ module.exports = function(env, argv) {
             loader: 'babel-loader',
           },
         },
+        {
+          test: /\.css$/,
+          use: [isDemo ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader'],
+          include: [
+            resolveMonorepoRoot('node_modules/@momentum-ui'),
+            resolveMonorepoRoot('node_modules/@webex/components'),
+            path.resolve(__dirname, 'packages'),
+          ],
+        },
+        {
+          test: /\.scss$/,
+          use: [isDemo ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+          include: [path.resolve(__dirname, 'packages')],
+        },
         {
           test: /\.html$/,
           use: [
@@ -49,22 +91,14 @@ module.exports = function(env, argv) {
             },
           ],
         },
-        {
-          test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
-        },
-        {
-          test: /\.scss$/,
-          exclude: /node_modules/,
-          use: ['style-loader', 'css-loader', 'sass-loader'],
-        },
         {
           test: /\.(woff(2)?|ttf|eot|svg|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
           use: [
             {
               loader: 'file-loader',
               options: {
-                outputPath: 'assets/',
+                outputPath: isDemo ? 'assets/' : 'css/assets/',
+                name: '[name].[contenthash].[ext]',
               },
             },
           ],
@@ -86,23 +120,27 @@ module.exports = function(env, argv) {
             server: {
               type: 'https',
             },
-          } // After upgrading webpack dev server to the latest version, config required changes as existing options were deprecated
+          }
         : undefined,
     plugins: [
       new CleanWebpackPlugin(),
-      new HtmlWebpackPlugin({
-        filename: 'index.html',
-        template: 'demo/index.html',
-        favicon: 'demo/webex-logo.png',
-      }),
-      new webpack.HotModuleReplacementPlugin(),
+      isDemo &&
+        new HtmlWebpackPlugin({
+          filename: 'index.html',
+          template: 'demo/index.html',
+          favicon: 'demo/webex-logo.png',
+        }),
+      isDemo && new webpack.HotModuleReplacementPlugin(),
+      !isDemo &&
+        new MiniCssExtractPlugin({
+          filename: 'css/webex-widgets.css',
+        }),
       new webpack.DefinePlugin({
-        __appVersion__: JSON.stringify(version)
+        __appVersion__: JSON.stringify(version),
       }),
-      new webpack.ProvidePlugin({  //Fixes 'process is not defined' and 'Buffer not defined' errors
-        process: 'process/browser',
+      new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
     ],
-  };
+  });
 };