chore: config webpack for dev & prod environment (#33)

package.json

@@ -33,10 +33,6 @@
   },
   "homepage": "https://github.com/pythonbrad/afrim-web#readme",
   "devDependencies": {
-    "copy-webpack-plugin": "^11.0.0",
-    "prettier": "3.2.5",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "prettier": "3.2.5"
   }
 }

packages/afrim-input/package.json

@@ -1,11 +1,11 @@
 {
   "name": "afrim-input",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A library that simplify the deployment of Afrim in any text field.",
   "main": "dist/afrim_input.js",
   "module": "src/index.js",
   "scripts": {
-    "bundle": "webpack"
+    "bundle": "webpack --config webpack.prod.js"
   },
   "repository": {
     "type": "git",
@@ -29,7 +29,10 @@
     "textarea-caret": "^3.1.0"
   },
   "devDependencies": {
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.5.4",
     "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^6.0.1"
   }
 }

packages/afrim-input/src/bootstrap.js

@@ -3,6 +3,9 @@
 // that no one else needs to worry about it again.
 import("./index.js")
   .then((o) => {
+    if (process.env.NODE_ENV !== "production") {
+      console.log("[afrim-input] Looks like we are in development mode!");
+    }
     window.Afrim = o.default;
   })
-  .catch((e) => console.error("Error importing `index.js`:", e));
+  .catch((e) => console.error("Error importing `index.ts`:", e));

packages/afrim-input/webpack.common.js

@@ -0,0 +1,13 @@
+const path = require("path");
+
+module.exports = {
+  entry: "./src/bootstrap.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "afrim_input.js",
+    clean: true,
+  },
+  experiments: {
+    asyncWebAssembly: true,
+  },
+};

packages/afrim-input/webpack.dev.js

@@ -0,0 +1,8 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "development",
+  devtool: "inline-source-map",
+  devServer: { static: "./dist" },
+});

packages/afrim-input/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",
+});

packages/afrim-playground/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "description": "Playground to test the afrim input method.",
   "scripts": {
-    "bundle": "webpack",
-    "start": "webpack-dev-server"
+    "bundle": "webpack --config webpack.prod.js",
+    "start": "webpack-dev-server --config webpack.dev.js"
   },
   "repository": {
     "type": "git",
@@ -25,6 +25,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^6.0.1"
   }
 }

packages/afrim-playground/src/bootstrap.js

@@ -3,6 +3,9 @@
 // that no one else needs to worry about it again.
 import("./index.js")
   .then((o) => {
+    if (process.env.NODE_ENV !== "production") {
+      console.log("[afrim-playground] Looks like we are in development mode!");
+    }
     window.Afrim = o.Afrim;
   })
   .catch((e) => console.error("Error importing `index.js`:", e));

packages/afrim-playground/webpack.config.js → packages/afrim-playground/webpack.common.js

@@ -8,12 +8,12 @@ module.exports = {
     filename: "index.js",
     clean: true,
   },
-  mode: "development",
   plugins: [
     new CopyWebpackPlugin({
       patterns: [{ from: "src/index.html" }],
     }),
   ],
+
   experiments: {
     asyncWebAssembly: true,
   },

packages/afrim-playground/webpack.dev.js

@@ -0,0 +1,8 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "development",
+  devtool: "inline-source-map",
+  devServer: { static: "./dist" },
+});

packages/afrim-playground/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",
+});