working webpack into template

package.json

@@ -4,19 +4,24 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "deploy-v3": "npm run build-tooling && npm run sync && node ./tools/deploy.js && npm run build-js && npm run build-css",
+    "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js",
     "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
-    "build-js": "tsc -p tsconfig.json",
+    "build-js": "webpack --config ./webpack.config.cjs && webpack --config ./webpack.config.settings.cjs && webpack --config ./webpack.config.background.cjs",
     "build-css": "sass ./src/sass/:./dist/css/",
-    "build-tooling": "tsc ./tools/v2.ts --target esnext --module esnext --lib ESNext && tsc ./tools/syncConfig.ts --target esnext --module esnext --lib ESNext && tsc ./tools/deploy.ts --target esnext --module esnext --lib ESNext",
+    "build-tooling": "tsc --project ./tooling.tsconfig.json",
     "watch-ts": "tsc -w -p tsconfig.json",
     "watch-sass": "sass --watch ./src/sass/:./dist/css/",
     "sync": "npm run build-tooling && node ./tools/syncConfig.js"
   },
   "devDependencies": {
-    "@types/node": "^18.7.4",
+    "@types/chrome": "^0.0.206",
+    "@types/node": "^18.11.18",
+    "@webcomponents/webcomponentsjs": "^2.7.0",
     "sass": "^1.39.0",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "browserslist": [
     "> 1%",
@@ -38,5 +43,8 @@
   },
   "bugs": {
     "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
+  },
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.5.1"
   }
 }

tooling.tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "outDir": "./tools/",
+        "rootDir": "./tools/",
+        "removeComments": true,
+        "moduleResolution": "node",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "types": [
+            "node",
+            "chrome"
+        ]
+    },
+    "include": [
+        "./tools/*.ts"
+    ],
+    "exclude": [
+        "node_modules",
+        "./src/*.ts",
+        "./src/**/*.ts",
+        "./dist/*.ts",
+        "./dist/*.js"
+    ]
+}

tools/clean.ts

@@ -0,0 +1,9 @@
+import * as fs from "fs";
+
+function removeExport(file: string) {
+	let content = fs.readFileSync(file, "utf8");
+	content = content.replace("export {};", "");
+	fs.writeFileSync(file, content);
+}
+
+removeExport("./dist/js/background.js");

tsconfig.json

@@ -4,28 +4,28 @@
 
         /* Basic Options */
         // "incremental": true,                         /* Enable incremental compilation */
-    "target": "ESNext",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
+        "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
-    "module": "ESNext",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+        "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
         // "lib": ["ESNext"],                                   /* Specify library files to be included in the compilation. */
         // "allowJs": true,                             /* Allow javascript files to be compiled. */
         // "checkJs": true,                             /* Report errors in .js files. */
         // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
         // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
         // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
+        "sourceMap": true /* Generates corresponding '.map' file. */,
         // "outFile": "./public/js/app.js",                             /* Concatenate and emit output to single file. */
-    "outDir": "./dist/js/",                              /* Redirect output structure to the directory. */
+        "outDir": "./dist/js/" /* Redirect output structure to the directory. */,
         // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
         // "composite": true,                           /* Enable project compilation */
         // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
-    // "removeComments": true,                      /* Do not emit comments to output. */
+        "removeComments": true /* Do not emit comments to output. */,
         // "noEmit": true,                              /* Do not emit outputs. */
         // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
         // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
         // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
         "moduleResolution": "node",
         /* Strict Type-Checking Options */
-    "strict": true,                                 /* Enable all strict type-checking options. */
+        "strict": true /* Enable all strict type-checking options. */,
         // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
         // "strictNullChecks": true,                    /* Enable strict null checks. */
         // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
@@ -51,7 +51,7 @@
         // "typeRoots": [],                             /* List of folders to include type definitions from. */
         // "types": [],                                 /* Type declaration files to be included in compilation. */
         // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
         // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
         // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
 
@@ -66,16 +66,10 @@
         // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
 
         /* Advanced Options */
-    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
+        "skipLibCheck": true /* Skip type checking of declaration files. */,
         "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
     },
-  "include": [
+    "include": ["./src/**/*.ts", "./src/*.ts"],
-    "./src/**/*.ts",
+    "exclude": ["node_modules", "./tools/*.ts", "./dist/*.ts", "./dist/*.js"],
-    "./src/*.ts"
+    "types": ["node", "chrome"]
-  ],
-  "exclude": [
-    "./tools/*.ts",
-    "./dist/*.ts",
-    "./dist/*.js"
-  ]
 }

webpack.config.background.cjs

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+	entry: './src/app.ts',
+	mode: 'production',
+	devtool: 'source-map',
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: [
+					"/node_modules/",
+					"/dist/",
+					"/src/app.ts",
+					"/src/settings.ts"
+				],
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts'],
+	},
+	output: {
+		filename: 'background.js',
+		path: path.resolve(__dirname, 'dist/js'),
+	},
+};

webpack.config.cjs

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+	entry: './src/app.ts',
+	mode: 'production',
+	devtool: 'source-map',
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: [
+					"/node_modules/",
+					"/dist/",
+					"/src/background.ts",
+					"/src/settings.ts"
+				],
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts'],
+	},
+	output: {
+		filename: 'app.js',
+		path: path.resolve(__dirname, 'dist/js'),
+	},
+};

webpack.config.settings.cjs

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+	entry: './src/app.ts',
+	mode: 'production',
+	devtool: 'source-map',
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: [
+					"/node_modules/",
+					"/dist/",
+					"/src/background.ts",
+					"/src/app.ts"
+				],
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts'],
+	},
+	output: {
+		filename: 'settings.js',
+		path: path.resolve(__dirname, 'dist/js'),
+	},
+};