Bundle with webpack

Author: nickserv

.gitignore

@@ -47,9 +47,6 @@ typings/
 # TypeScript cache
 *.tsbuildinfo
 
-# TypeScript output files
-*.js
-
 # Optional npm cache directory
 .npm
 

DevToolsPlugin.html

@@ -4,7 +4,7 @@
   "name": "Testing Library Recorder",
   "description": "Testing Library Extension for Chrome DevTools Recorder",
   "permissions": [],
-  "devtools_page": "DevToolsPlugin.html",
+  "devtools_page": "index.html",
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'"
   },

manifest.json

@@ -1,14 +1,31 @@
 {
   "private": true,
   "scripts": {
-    "prepare": "tsc"
+    "start": "webpack --mode=development --watch",
+    "build": "webpack --mode=production",
+    "test": "tsc"
   },
   "dependencies": {
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-typescript": "^7.18.6",
     "@puppeteer/replay": "^0.6.1",
+    "babel-loader": "^8.2.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "html-webpack-plugin": "^5.5.0",
     "prettier": "^2.7.1",
     "prettier-config-nick": "^1.0.3",
     "puppeteer": "^15.5.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-typescript"
+    ]
+  },
+  "browserslist": "chrome 104",
   "prettier": "prettier-config-nick"
 }

package-lock.json

@@ -2,6 +2,11 @@
   "compilerOptions": {
     "strict": true,
     "moduleResolution": "Node",
+    "noEmit": true,
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
     "target": "ES2017"
-  }
+  },
+  "exclude": ["dist"]
 }

package.json

@@ -0,0 +1,24 @@
+import CopyPlugin from "copy-webpack-plugin"
+import HtmlPlugin from "html-webpack-plugin"
+
+export default {
+  devtool: false,
+  plugins: [
+    new CopyPlugin({
+      patterns: ["manifest.json"],
+    }),
+    new HtmlPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        test: /\.(j|t)s$/,
+        loader: "babel-loader",
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".js", ".ts"],
+  },
+}