From c6ca8f3e51e134b049f09306370557c64c79b272 Mon Sep 17 00:00:00 2001
From: Dexter Tan <dev@dextertanyj.com>
Date: Mon, 21 Aug 2023 23:26:50 +0800
Subject: [PATCH] chore: add webpack configuration

---
 README.md                 | 15 ++++++++++++
 webpack.config.js.example | 50 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 webpack.config.js.example

diff --git a/README.md b/README.md
index 5c7bdff..3ace970 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,21 @@ check(response, {
 });
 ```
 
+**4. Bundle your test.**
+
+Refer to [k6-template-typescript](https://github.com/grafana/k6-template-typescript) on how to configure your bundler to emit `k6` compatible code.
+
+Use the following regex to ensure that `k6-trpc` is bundled together in the output and is not treated as an external dependency.
+
+```javascript
+{
+  // Other webpack configuration parameters.
+  externals: /^(k6|https?\:\/\/)(\/.*)?(?!-trpc)/,
+}
+```
+
+> Alternatively, refer to `webpack.config.js.example` for a sample webpack configuration.
+
 ## Configuration
 
 `createClient` accepts a `transformer` argument which allows you to use `SuperJSON` or any other tRPC-compliant transformer.
diff --git a/webpack.config.js.example b/webpack.config.js.example
new file mode 100644
index 0000000..dfa2a4b
--- /dev/null
+++ b/webpack.config.js.example
@@ -0,0 +1,50 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const GlobEntries = require('webpack-glob-entries');
+
+module.exports = {
+  mode: 'production',
+  entry: GlobEntries('./src/*test*.ts'), // Generates multiple entry for each test
+  output: {
+    path: path.join(__dirname, 'build'),
+    libraryTarget: 'commonjs',
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: { 
+          loader: 'babel-loader',
+          options: { 
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-typescript"
+            ],
+            plugins: [
+              "@babel/plugin-proposal-class-properties",
+              "@babel/plugin-proposal-object-rest-spread"
+            ]
+          }
+        },
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  externals: /^(k6|https?\:\/\/)(\/.*)?(?!-trpc)/,
+  // Generate map files for compiled scripts
+  devtool: "source-map",
+  stats: {
+    colors: true,
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+  ],
+  optimization: {
+    // Don't minimize, as it's not used in the browser
+    minimize: false,
+  },
+};
\ No newline at end of file