Add seperate webpack configs for esm and cjs builds (#23)

* Add seperate webpack configs for esm and cjs builds * refactor webpack.config.js a little bit
criipto · Aug 26, 2023 · 9f3f8bb · 9f3f8bb
1 parent 3a761e2
commit 9f3f8bb
Showing 1 changed file with 34 additions and 34 deletions.
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,37 +1,31 @@
-const path = require('path');
-const webpack = require('webpack');
-const nodeExternals = require('webpack-node-externals');
+const path = require("path");
+const webpack = require("webpack");
+const nodeExternals = require("webpack-node-externals");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const fs = require('fs');
 
-module.exports = {
-  mode: 'production',
+// Shared config between both cjs and esm builds
+const createConfig = (bundleName, type) => ({
+  mode: "production",
   devtool: "source-map",
   experiments: {
-    outputModule: true
+    outputModule: true,
   },
+  externalsPresets: { node: true },
+  externals: [nodeExternals({ importType: type })],
   entry: {
-    'criipto-verify-react.esm': {
-      import: path.resolve(__dirname, 'src/index.ts'),
+    [bundleName]: {
+      import: path.resolve(__dirname, "src/index.ts"),
       library: {
-        type: 'module'
-      }
+        type: type,
+      },
     },
-    'criipto-verify-react.cjs': {
-      import: path.resolve(__dirname, 'src/index.ts'),
-      library: {
-        type: 'commonjs'
-      }
-    }
   },
-  externalsPresets: { node: true },
-  externals: [nodeExternals()],
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'criipto-verify-react.css'
+      filename: "criipto-verify-react.css",
     }),
     new webpack.DefinePlugin({
-      __VERSION__: JSON.stringify(require("./package.json").version)
+      __VERSION__: JSON.stringify(require("./package.json").version),
     }),
   ],
   module: {
@@ -45,34 +39,40 @@ module.exports = {
           {
             loader: "css-loader",
             options: {
-              sourceMap: false
-            }
-          }
+              sourceMap: false,
+            },
+          },
         ],
       },
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        loader: 'ts-loader',
+        loader: "ts-loader",
       },
       {
         test: /\.(png|jpg|gif|svg)$/i,
         use: [
           {
-            loader: 'url-loader',
+            loader: "url-loader",
             options: {
               limit: true,
             },
           },
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: [".tsx", ".ts", ".js"],
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js'
-  }
-};
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js",
+  },
+});
+
+// Export both cjs and esm builds
+module.exports = [
+  createConfig("criipto-verify-react.cjs", "commonjs"),
+  createConfig("criipto-verify-react.esm", "module"),
+];