diff --git a/demo/package.json b/demo/package.json
index 240e5f20..740dcc65 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -5,8 +5,9 @@
     "scripts": {
         "test": "jest --no-cache",
         "test-cov": "jest --no-cache --coverage",
-        "build-dev": "webpack",
-        "start": "webpack serve"
+        "build-dev": "webpack --config webpack.dev.js",
+        "build": "webpack --config webpack.prod.js",
+        "start": "webpack serve --config webpack.dev.js"
     },
     "repository": {
         "type": "git",
@@ -36,7 +37,8 @@
         "style-loader": "^3.3.3",
         "typescript": "^5.3.3",
         "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4"
+        "webpack-cli": "^5.1.4",
+        "webpack-merge": "^5.10.0"
     },
     "dependencies": {
         "@emotion/styled": "^11.11.0",
diff --git a/demo/webpack.common.js b/demo/webpack.common.js
new file mode 100644
index 00000000..65a43bac
--- /dev/null
+++ b/demo/webpack.common.js
@@ -0,0 +1,50 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+    entry: path.resolve(__dirname, "src/index.tsx"),
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "index.bundle.js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.([jt]sx?)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            "@babel/preset-env",
+                            "@babel/preset-typescript",
+                            "@babel/preset-react",
+                        ],
+                    },
+                },
+            },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"],
+            },
+            { test: /\.json$/, type: "json" },
+        ],
+    },
+    externals: {
+        fs: "fs",
+    },
+    externalsType: "window",
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: "MemoryViz Demo",
+            filename: "./index.html",
+            template: "./src/html/index.html",
+        }),
+    ],
+    resolve: {
+        extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"],
+        alias: {
+            "memory-viz": path.resolve(__dirname, "../memory-viz/src"),
+        },
+    },
+};
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
deleted file mode 100644
index 29abc19e..00000000
--- a/demo/webpack.config.js
+++ /dev/null
@@ -1,64 +0,0 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const path = require("path");
-
-module.exports = [
-    {
-        entry: path.resolve(__dirname, "src/index.tsx"),
-        output: {
-            path: path.resolve(__dirname, "dist"),
-            filename: "index.js",
-        },
-        devServer: {
-            static: {
-                directory: path.join(__dirname, "dist"),
-            },
-            compress: true,
-            port: 9000,
-            client: {
-                overlay: false,
-            },
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.([jt]sx?)$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: "babel-loader",
-                        options: {
-                            presets: [
-                                "@babel/preset-env",
-                                "@babel/preset-typescript",
-                                "@babel/preset-react",
-                            ],
-                        },
-                    },
-                },
-                {
-                    test: /\.css$/i,
-                    use: ["style-loader", "css-loader"],
-                },
-                { test: /\.json$/, type: "json" },
-            ],
-        },
-        mode: "development",
-        devtool: "inline-source-map",
-        externals: {
-            fs: "fs",
-        },
-        externalsType: "window",
-        plugins: [
-            new HtmlWebpackPlugin({
-                title: "MemoryViz Demo",
-                filename: "./index.html",
-                template: "./src/html/index.html",
-            }),
-        ],
-        resolve: {
-            extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"],
-            alias: {
-                "memory-viz": path.resolve(__dirname, "../memory-viz/src"),
-            },
-        },
-    },
-];
diff --git a/demo/webpack.dev.js b/demo/webpack.dev.js
new file mode 100644
index 00000000..5e61be1f
--- /dev/null
+++ b/demo/webpack.dev.js
@@ -0,0 +1,17 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        static: {
+            directory: path.join(__dirname, "dist"),
+        },
+        compress: true,
+        port: 9000,
+        client: {
+            overlay: false,
+        },
+    },
+});
diff --git a/demo/webpack.prod.js b/demo/webpack.prod.js
new file mode 100644
index 00000000..f451de99
--- /dev/null
+++ b/demo/webpack.prod.js
@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+});
diff --git a/docs/docs/99-api/index.md b/docs/docs/99-api/index.md
index c53c8c78..731d9285 100644
--- a/docs/docs/99-api/index.md
+++ b/docs/docs/99-api/index.md
@@ -1,6 +1,6 @@
 ---
 id: "index"
-title: "MemoryViz"
+title: "memory-viz"
 sidebar_label: "Readme"
 sidebar_position: 0
 custom_edit_url: null
diff --git a/docs/docs/99-api/modules.md b/docs/docs/99-api/modules.md
index 29852c69..2a26432e 100644
--- a/docs/docs/99-api/modules.md
+++ b/docs/docs/99-api/modules.md
@@ -1,6 +1,6 @@
 ---
 id: "modules"
-title: "MemoryViz"
+title: "memory-viz"
 sidebar_label: "Exports"
 sidebar_position: 0.5
 custom_edit_url: null
@@ -32,4 +32,4 @@ the produced canvas
 
 #### Defined in
 
-user_functions.ts:29
+[user_functions.ts:29](https://github.com/david-yz-liu/memory-viz/blob/4d72b15/memory-viz/src/user_functions.ts#L29)
diff --git a/memory-viz/package.json b/memory-viz/package.json
index 369c5d31..6b195661 100644
--- a/memory-viz/package.json
+++ b/memory-viz/package.json
@@ -6,9 +6,9 @@
     "scripts": {
         "test": "jest --no-cache",
         "test-cov": "jest --no-cache --coverage",
-        "watch": "webpack --watch",
-        "build-dev": "tsc && webpack",
-        "build": "tsc && webpack --mode production"
+        "watch": "webpack --watch --config webpack.dev.js",
+        "build-dev": "tsc && webpack --config webpack.dev.js",
+        "build": "tsc && webpack --config webpack.prod.js"
     },
     "keywords": [
         "education",
@@ -40,6 +40,7 @@
         "ts-node": "^10.9.2",
         "typescript": "^5.3.3",
         "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1"
+        "webpack-cli": "^5.0.1",
+        "webpack-merge": "^5.10.0"
     }
 }
diff --git a/memory-viz/webpack.common.js b/memory-viz/webpack.common.js
new file mode 100644
index 00000000..a5d5fb6f
--- /dev/null
+++ b/memory-viz/webpack.common.js
@@ -0,0 +1,40 @@
+const path = require("path");
+
+module.exports = {
+    // target: "web",
+    entry: path.resolve(__dirname, "src/index.ts"),
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "memory_viz.bundle.js",
+        library: {
+            name: "MemoryViz",
+            type: "umd",
+            export: "default",
+        },
+        globalObject: "this",
+        clean: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.([jt]s)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            "@babel/preset-env",
+                            "@babel/preset-typescript",
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+    externals: {
+        fs: "fs",
+    },
+    resolve: {
+        extensions: [".ts", ".js"],
+    },
+};
diff --git a/memory-viz/webpack.config.js b/memory-viz/webpack.config.js
deleted file mode 100644
index 25f4a195..00000000
--- a/memory-viz/webpack.config.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const path = require("path");
-
-module.exports = [
-    {
-        // target: "web",
-        entry: path.resolve(__dirname, "src/index.ts"),
-        output: {
-            path: path.resolve(__dirname, "dist"),
-            filename: "memory_viz.js",
-            library: {
-                name: "MemoryViz",
-                type: "umd",
-                export: "default",
-            },
-            globalObject: "this",
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.([jt]s)$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: "babel-loader",
-                        options: {
-                            presets: [
-                                "@babel/preset-env",
-                                "@babel/preset-typescript",
-                            ],
-                        },
-                    },
-                },
-            ],
-        },
-        mode: "development",
-        devtool: "inline-source-map",
-        externals: {
-            fs: "fs",
-        },
-        resolve: {
-            extensions: [".ts", ".js"],
-        },
-    },
-];
diff --git a/memory-viz/webpack.dev.js b/memory-viz/webpack.dev.js
new file mode 100644
index 00000000..406102cd
--- /dev/null
+++ b/memory-viz/webpack.dev.js
@@ -0,0 +1,10 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        static: "./dist",
+    },
+});
diff --git a/memory-viz/webpack.prod.js b/memory-viz/webpack.prod.js
new file mode 100644
index 00000000..f451de99
--- /dev/null
+++ b/memory-viz/webpack.prod.js
@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+});
diff --git a/package-lock.json b/package-lock.json
index 3af13812..5a9fc5c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,8 @@
                 "style-loader": "^3.3.3",
                 "typescript": "^5.3.3",
                 "webpack": "^5.89.0",
-                "webpack-cli": "^5.1.4"
+                "webpack-cli": "^5.1.4",
+                "webpack-merge": "^5.10.0"
             }
         },
         "docs": {
@@ -95,7 +96,8 @@
                 "ts-node": "^10.9.2",
                 "typescript": "^5.3.3",
                 "webpack": "^5.75.0",
-                "webpack-cli": "^5.0.1"
+                "webpack-cli": "^5.0.1",
+                "webpack-merge": "^5.10.0"
             }
         },
         "node_modules/@algolia/autocomplete-core": {