Exclude deps from bundle, add esm output and sourcemaps

Author: lewisl9029

webpack/demo.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const webpack = require("webpack");
-const merge = require("webpack-merge");
+const merge = require("webpack-merge").default;
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
@@ -32,11 +32,7 @@ module.exports = merge(baseConfig, {
   },
   devServer: {
     hot: true,
-    hotOnly: true,
-    contentBase: path.resolve(__dirname, "../demo/dist"),
-    publicPath: "/",
     historyApiFallback: true,
-    stats: "minimal",
     port: 8080
   },
   plugins: [

webpack/production.js

@@ -1,14 +1,26 @@
 const path = require("path");
 const webpack = require("webpack");
-const merge = require("webpack-merge");
+const merge = require("webpack-merge").default;
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const TerserJSPlugin = require("terser-webpack-plugin");
+const packageJson = require("../package.json");
 
 const baseConfig = require("./base");
 
-module.exports = merge(baseConfig, {
+const dependencyNameToExternals = (dependencyName) => [
+  dependencyName,
+  new RegExp(`^${dependencyName}/.*`),
+];
+
+const common = merge(baseConfig, {
   mode: "production",
-  devtool: false,
+  devtool: "source-map",
+  externals: [
+    ...Object.keys(packageJson.dependencies).flatMap(dependencyNameToExternals),
+    ...Object.keys(packageJson.peerDependencies).flatMap(
+      dependencyNameToExternals
+    ),
+  ],
   resolve: {
     unsafeCache: true,
     plugins: [
@@ -18,11 +30,6 @@ module.exports = merge(baseConfig, {
   entry: {
     index: path.resolve(__dirname, "../src/index.tsx")
   },
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "../dist"),
-    libraryTarget: 'commonjs2'
-  },
   plugins: [
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify("production")
@@ -32,5 +39,28 @@ module.exports = merge(baseConfig, {
     minimizer: [
       new TerserJSPlugin({ extractComments: false })
     ]
-  }
-});
+  },
+  experiments: {
+    outputModule: true,
+  },
+});
+
+module.exports = [
+  {
+    ...common,
+    output: {
+      filename: "[name].js",
+      path: path.resolve(__dirname, "../dist"),
+      libraryTarget: "commonjs2",
+    },
+  },
+  {
+    ...common,
+    output: {
+      filename: "[name].esm.js",
+      path: path.resolve(__dirname, "../dist"),
+      environment: { module: true },
+      libraryTarget: "module",
+    },
+  },
+];