Use webpack for umd

package.json

@@ -4,7 +4,7 @@
   "description": "TypeScript implementation of the Waku v2 protocol",
   "main": "build/main/index.js",
   "typings": "build/main/index.d.ts",
-  "module": "build/module/index.js",
+  "module": "build/esm/index.js",
   "repository": "https://github.com/status-im/js-waku",
   "license": "MIT OR Apache-2.0",
   "keywords": [
@@ -16,10 +16,14 @@
     "dapps"
   ],
   "scripts": {
-    "build": "run-s build:*",
+    "build": "run-s build:**",
     "build:main": "tsc -p tsconfig.json",
-    "build:module": "tsc -p tsconfig.module.json",
     "build:dev": "tsc -p tsconfig.dev.json",
+    "build:esm": "tsc --module es2015 --target es5 --outDir build/esm",
+    "build:umd": "webpack --config webpack.config.js",
+    "build:umd:min": "webpack --config webpack.config.min.js",
+    "build:umd:bundle": "webpack --config webpack.config.bundle.js",
+    "build:umd:min:bundle": "webpack --config webpack.config.min.bundle.js",
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.ts\" \"./*.json\" \"*.conf.js\" --write",
     "fix:lint": "eslint src --ext .ts --fix",
@@ -78,7 +82,10 @@
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
     "app-root-path": "^3.0.0",
+    "assert": "^2.0.0",
+    "buffer": "^6.0.3",
     "chai": "^4.3.4",
+    "crypto-browserify": "^3.12.0",
     "cspell": "^4.1.0",
     "eslint": "^7.8.0",
     "eslint-config-prettier": "^6.11.0",
@@ -97,13 +104,18 @@
     "nyc": "^15.1.0",
     "p-timeout": "^4.1.0",
     "prettier": "^2.1.1",
+    "process": "^0.11.10",
     "puppeteer": "^10.1.0",
+    "stream-browserify": "^3.0.0",
     "tail": "^2.2.0",
+    "ts-loader": "^9.2.6",
     "ts-node": "^9.1.1",
     "ts-proto": "^1.82.5",
     "typedoc": "^0.20.29",
     "typedoc-plugin-no-inherit": "^1.3.0",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.2",
+    "webpack": "^5.58.1",
+    "webpack-cli": "^4.9.0"
   },
   "files": [
     "build/main",

tsconfig.umd.json

@@ -1,9 +1,10 @@
 {
   "extends": "./tsconfig",
   "compilerOptions": {
-    "target": "esnext",
-    "outDir": "build/module",
-    "module": "esnext"
+    "module": "UMD",
+    "target": "es6",
+    "removeComments": true,
+    "outFile": "build/min.js"
   },
   "exclude": ["node_modules/**", "src/**/*.spec.ts", "src/test_utils"]
 }

webpack.config.bundle.js

@@ -0,0 +1,39 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    "js-waku": './src/index.ts'
+  },
+  devtool: 'inline-source-map',
+  module: {
+    rules: [{
+      test: /\.ts$/,
+      use: 'ts-loader',
+      exclude: /node_modules/
+    }]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+    })
+  ],
+  resolve: {
+    extensions: ['.ts', '.js'],
+    fallback: {
+      buffer: require.resolve('buffer/'),
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      assert: require.resolve('assert'),
+    },
+  },
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'build/umd'),
+    library: 'jswaku',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+  }
+};

webpack.config.js

@@ -0,0 +1,45 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    "js-waku": './src/index.ts'
+  },
+  devtool: 'inline-source-map',
+  module: {
+    rules: [{
+      test: /\.ts$/,
+      use: 'ts-loader',
+      exclude: /node_modules/
+    }]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+    })
+  ],
+  resolve: {
+    extensions: ['.ts', '.js'],
+    fallback: {
+      buffer: require.resolve('buffer/'),
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      assert: require.resolve('assert'),
+    },
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'build/umd'),
+    library: 'jswaku',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+  },
+  optimization: {
+    splitChunks: {
+      name: 'vendors',
+      chunks: 'all',
+    }
+  }
+};

webpack.config.min.bundle.js

@@ -0,0 +1,39 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    "js-waku": './src/index.ts'
+  },
+  devtool: 'inline-source-map',
+  module: {
+    rules: [{
+      test: /\.ts$/,
+      use: 'ts-loader',
+      exclude: /node_modules/
+    }]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+    })
+  ],
+  resolve: {
+    extensions: ['.ts', '.js'],
+    fallback: {
+      buffer: require.resolve('buffer/'),
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      assert: require.resolve('assert'),
+    },
+  },
+  output: {
+    filename: '[name].min.bundle.js',
+    path: path.resolve(__dirname, 'build/umd'),
+    library: 'jswaku',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+  }
+};

webpack.config.min.js

@@ -0,0 +1,45 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    "js-waku": './src/index.ts'
+  },
+  devtool: 'inline-source-map',
+  module: {
+    rules: [{
+      test: /\.ts$/,
+      use: 'ts-loader',
+      exclude: /node_modules/
+    }]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+    })
+  ],
+  resolve: {
+    extensions: ['.ts', '.js'],
+    fallback: {
+      buffer: require.resolve('buffer/'),
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      assert: require.resolve('assert'),
+    },
+  },
+  output: {
+    filename: '[name].min.js',
+    path: path.resolve(__dirname, 'build/umd'),
+    library: 'jswaku',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+  },
+  optimization: {
+    splitChunks: {
+      name: 'vendors',
+      chunks: 'all',
+    }
+  }
+};