Add: Rewrite Webpack config with TypeScript

.eslintignore

@@ -3,6 +3,5 @@ node_modules
 dist
 pnpm-lock.yaml
 Dockerfile
-package.json
 *.md
 

.prettierignore

@@ -2,6 +2,5 @@ node_modules
 .next
 pnpm-lock.yaml
 Dockerfile
-package.json
 /README.md
 /SUSHI.md

package.json

@@ -4,9 +4,15 @@
     "license": "MIT",
     "version": "2.0.0",
     "scripts": {
-        "build-chrome": "pnpm webpack --mode production --config webpack.prod.js --env browser=chrome",
-        "build-chrome:dev": "pnpm webpack --mode development --config webpack.dev.js --env browser=chrome",
-        "watch": "pnpm webpack --mode development --watch --config webpack.dev.js",
+        "build": "pnpm run build-chrome",
+        "build:dev": "pnpm run build-chrome:dev",
+        "watch": "pnpm run watch-chrome",
+        "build-chrome": "pnpm webpack --mode production --env browser=chrome",
+        "build-chrome:dev": "pnpm webpack --mode development --env browser=chrome",
+        "watch-chrome": "pnpm webpack --mode development --watch --env browser=chrome",
+        "build-firefox": "pnpm webpack --mode production --env browser=firefox",
+        "build-firefox:dev": "pnpm webpack --mode development --env browser=firefox",
+        "watch-firefox": "pnpm webpack --mode development --watch --env browser=firefox",
         "fmt": "prettier --write '**/*.{js,json,md,html,sh}'",
         "lint": "prettier --check . && eslint . ",
         "lint:fix": "pnpm fmt && eslint . --fix"
@@ -59,8 +65,7 @@
         "tsconfig-paths-webpack-plugin": "^4.1.0",
         "typescript": "^5.2.2",
         "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4",
-        "webpack-merge": "^5.10.0"
+        "webpack-cli": "^5.1.4"
     },
     "volta": {
         "node": "20.9.0"

prettier.config.js → prettier.config.mjs

@@ -1,5 +1,5 @@
 /** @type {import("prettier").Config} */
-module.exports = {
+export default {
     tabWidth: 4,
     singleQuote: false,
     trailingComma: "all",

tsconfig.json

@@ -10,5 +10,10 @@
         "paths": {
             "@/*": ["src/*"]
         }
+    },
+    "ts-node": {
+        "compilerOptions": {
+            "module": "CommonJS"
+        }
     }
 }

webpack.common.js → webpack.config.ts

@@ -1,24 +1,43 @@
-const CopyPlugin = require("copy-webpack-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const ESLintPlugin = require("eslint-webpack-plugin");
-const fs = require("fs");
-const HtmlPlugin = require("html-webpack-plugin");
-const path = require("path");
-const { TsconfigPathsPlugin } = require("tsconfig-paths-webpack-plugin");
+import CopyPlugin from "copy-webpack-plugin";
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
+import ESLintPlugin from "eslint-webpack-plugin";
+import fs from "fs";
+import HtmlPlugin from "html-webpack-plugin";
+import path from "path";
+import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
+import { Configuration } from "webpack";
 
 const loadFilesInScripts = function () {
     const dir = path.join(__dirname, "src/scripts");
     const files = fs.readdirSync(dir);
-    const entry = {};
+    const entry = {} as {
+        [key: string]: string;
+    };
     files.forEach(function (file) {
         const name = file.replace(".ts", "").replace("content_", "");
         entry[name] = path.join(dir, file);
     });
     return entry;
 };
 
-module.exports = (env) => {
-    console.log("env", env);
+interface Env {
+    browser?: "chrome" | "firefox";
+    WEBPACK_BUILD: boolean;
+    WEBPACK_BUNDLE: boolean;
+}
+
+interface Argv {
+    mode: "development" | "production";
+    env: Env;
+}
+
+module.exports = (env: Env, argv: Argv): Configuration => {
+    console.log("Build as " + argv.mode + " mode");
+
+    if (env.browser === undefined) {
+        throw new Error("Please set browser");
+    }
+
     return {
         entry: {
             popup: "./src/popup/index.tsx",
@@ -50,7 +69,6 @@ module.exports = (env) => {
                 {
                     test: /\.(css|sass|scss|pcss)/,
                     use: [
-                        CssMinimizerPlugin.loader,
                         "style-loader",
                         {
                             loader: "css-loader",
@@ -68,6 +86,10 @@ module.exports = (env) => {
             ],
         },
 
+        optimization: {
+            minimizer: [new CssMinimizerPlugin()],
+        },
+
         plugins: [
             new ESLintPlugin({ extensions: ["js", "jsx", "ts", "tsx"] }),
             new CopyPlugin({
@@ -112,5 +134,7 @@ module.exports = (env) => {
             maxEntrypointSize: 2000000,
             maxAssetSize: 2000000,
         },
+
+        devtool: argv.mode !== "development" ? false : "source-map",
     };
 };