Merge pull request #46 from lewisl9029/esm-externals-sourcemaps

Add ES module output, sourcemaps, minimize bundle size

Author: wwayne

package.json

@@ -3,6 +3,7 @@
   "version": "1.3.1",
   "description": "react library for generating avatar",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "scripts": {},
   "keywords": [
@@ -16,6 +17,7 @@
     "react": ">=16.0.0"
   },
   "dependencies": {
+    "@babel/runtime": "^7.14.3",
     "chroma-js": "^2.1.2",
     "prop-types": "^15.7.2"
   },
@@ -47,7 +49,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
     "file-saver": "^2.0.5",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "jest": "^27.0.6",
     "mini-css-extract-plugin": "^1.6.2",
     "postcss": "^8.3.6",
@@ -67,10 +69,10 @@
     "ts-jest": "^27.0.4",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "^4.4.2",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.8.2",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.77.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1",
+    "webpack-merge": "^5.8.0"
   },
   "repository": {
     "type": "git",

webpack/base.js

@@ -4,7 +4,7 @@ const tailwindcss = require("tailwindcss");
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-module.exports = {
+module.exports = ({ includeReactHotLoader = false } = {}) => ({
   context: path.resolve(__dirname, ".."),
   resolve: {
     modules: [
@@ -47,7 +47,7 @@ module.exports = {
               "@babel/plugin-proposal-private-methods",
               "@babel/plugin-syntax-async-generators",
               "@babel/plugin-transform-regenerator",
-              'react-hot-loader/babel',
+              ...(includeReactHotLoader ? ['react-hot-loader/babel'] : []),
             ],
           },
         },
@@ -80,4 +80,4 @@ module.exports = {
       }
     ]
   }
-};
+});

webpack/demo.js

@@ -1,13 +1,13 @@
 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");
 
 const baseConfig = require("./base");
 
-module.exports = merge(baseConfig, {
+module.exports = merge(baseConfig({ includeReactHotLoader: true }), {
   mode: "development",
   devtool: "eval-cheap-module-source-map",
   resolve: {
@@ -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",
+    },
+  },
+];