build(webpack): upgrade webpack config

.webpack/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

webpack.config.js

@@ -1,120 +1,147 @@
 // @ts-check
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const path = require("path");
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { getOptimization } from "./webpack.optimization.js";
+import { rules } from "./webpack.rules.js";
 
 /** @type {import("webpack").Configuration[]} */
-const config = [
+export default [
   {
-    name: 'main',
-    mode: 'development',
+    name: "main",
+    mode: "development",
     entry: {
-      main: './src/main.ts'
-    },
-    target: 'electron-main',
-    optimization: {
-      splitChunks: {
-        chunks: "all",
-        cacheGroups: {
-          default: {
-            name: 'main',
-            minChunks: 2,
-            priority: -20
-          },
-          defaultVendors: {
-            name: 'main-vendors',
-            test: /[\\/]node_modules[\\/]/,
-            priority: -10,
-            reuseExistingChunk: true,
-          }
-        }
-      }
+      main: "./src/main.ts"
     },
+    target: "electron-main",
+    optimization: getOptimization("main"),
     module: {
-      rules: [
-        {
-          test: /\.ts$/,
-          include: path.resolve(__dirname, 'src'),
-          loader: 'ts-loader',
-          resolve: {
-            extensions: [".ts", ".tsx", ".js"]
-          },
-          options: {
-            configFile: "tsconfig.webpack.json",
-            transpileOnly: true
-          }
-        }
-      ]
+      rules: rules
     },
     resolve: {
       symlinks: false
     },
     output: {
-      path: __dirname + '/app',
-      filename: '[name].js'
+      path: resolve(dirname(fileURLToPath(import.meta.url)), ".webpack"),
+      filename: "[name].js"
     },
     externalsPresets: {
       electronMain: true
     }
   },
   {
-    name: 'renderer',
-    mode: 'development',
+    name: "database",
+    mode: "development",
     entry: {
-      renderer: './src/renderer.tsx'
-    },
-    target: 'node',
-    optimization: {
-      splitChunks: {
-        chunks: "all",
-        cacheGroups: {
-          default: {
-            name: 'renderer',
-            minChunks: 2,
-            priority: -20
-          },
-          defaultVendors: {
-            name: 'renderer-vendors',
-            test: /[\\/]node_modules[\\/]/,
-            priority: -10,
-            reuseExistingChunk: true
-          }
-        }
-      }
+      database: "./src/database.ts"
     },
+    target: "electron-main",
+    optimization: getOptimization("database"),
     module: {
-      rules: [
-        {
-          test: /\.ts(x?)$/,
-          include: path.resolve(__dirname, 'src'),
-          loader: 'ts-loader',
-          resolve: {
-            extensions: [".ts", ".tsx", ".js"]
-          },
-          options: {
-            configFile: "tsconfig.webpack.json",
-            transpileOnly: true
-          }
-        }
-      ]
+      rules: rules
     },
     resolve: {
       symlinks: false
     },
     output: {
-      path: __dirname + '/app',
-      filename: '[name].js'
+      path: resolve(dirname(fileURLToPath(import.meta.url)), ".webpack"),
+      filename: "[name].js"
+    },
+    externalsPresets: {
+      electronMain: true
+    }
+  },
+  {
+    name: "renderer_main",
+    mode: "development",
+    entry: {
+      renderer_main: "./src/renderers/main/entry.tsx",
+    },
+    target: "electron-renderer",
+    module: {
+      rules: rules
+    },
+    resolve: {
+      symlinks: false
+    },
+    output: {
+      path: resolve(dirname(fileURLToPath(import.meta.url)), ".webpack"),
+      filename: "[name].js"
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: './src/index.html'
+        filename: "[name].html",
+        template: "./src/renderers/template.html"
       })
     ],
     externalsPresets: {
       electronRenderer: true
     },
     profile: true
+  },
+  {
+    name: "renderer_main_preload",
+    mode: "development",
+    entry: {
+      renderer_main_preload: "./src/renderers/main/preload.ts"
+    },
+    target: "electron-preload",
+    module: {
+      rules: rules
+    },
+    resolve: {
+      symlinks: false
+    },
+    output: {
+      path: resolve(dirname(fileURLToPath(import.meta.url)), ".webpack"),
+      filename: "[name].js"
+    }
+  },
+  {
+    name: "renderer_updater",
+    mode: "development",
+    entry: {
+      renderer_updater: "./src/renderers/updater/entry.tsx"
+    },
+    target: "electron-renderer",
+    module: {
+      rules: rules
+    },
+    resolve: {
+      symlinks: false
+    },
+    output: {
+      path: resolve(dirname(fileURLToPath(import.meta.url)), ".webpack"),
+      filename: "[name].js"
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        filename: "[name].html",
+        template: "./src/renderers/template.html"
+      })
+    ],
+    externalsPresets: {
+      electronRenderer: true
+    },
+    profile: true
+  },
+  {
+    name: "renderer_updater_preload",
+    mode: "development",
+    entry: {
+      renderer_updater_preload: "./src/renderers/updater/preload.ts"
+    },
+    target: "electron-preload",
+    module: {
+      rules: rules
+    },
+    resolve: {
+      symlinks: false
+    },
+    output: {
+      path: resolve(dirname(fileURLToPath(import.meta.url)), ".webpack"),
+      filename: "[name].js"
+    }
   }
 ]
-
-module.exports = config

webpack.optimization.js

@@ -0,0 +1,24 @@
+// @ts-check
+
+/**
+ * @param {string} processType
+ * @returns {Required<import("webpack").Configuration>["optimization"]}
+ */
+export const getOptimization = (processType) => ({
+  splitChunks: {
+    chunks: "all",
+    cacheGroups: {
+      default: {
+        name: processType,
+        minChunks: 2,
+        priority: -20
+      },
+      defaultVendors: {
+        name: `${processType}-vendors`,
+        test: /[\\/]node_modules[\\/]/,
+        priority: -10,
+        reuseExistingChunk: true,
+      }
+    }
+  }
+})

webpack.rules.js

@@ -0,0 +1,47 @@
+// @ts-check
+
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+
+/**
+ * @type {Required<import("webpack").ModuleOptions>["rules"]}
+ */
+export const rules = [
+  {
+    test: /\.tsx?$/,
+    include: resolve(dirname(fileURLToPath(import.meta.url)), "src"),
+    loader: "ts-loader",
+    resolve: {
+      extensions: [".ts", ".tsx", ".js"]
+    },
+    options: {
+      configFile: "tsconfig.webpack.json",
+      transpileOnly: true
+    }
+  },
+  {
+    test: /\.(png|jpe?g|svg)$/i,
+    type: "asset/resource",
+    generator: {
+      filename: "assets/images/[name].[hash][ext][query]"
+    }
+  },
+  {
+    test: /\.(icns|ico)$/i,
+    type: "asset/resource",
+    generator: {
+      filename: "assets/icons/[name].[hash][ext][query]"
+    }
+  },
+  {
+    test: /\.(ttf|otf|woff2?)$/i,
+    type: "asset/resource",
+    generator: {
+      filename: "assets/fonts/[name].[hash][ext][query]"
+    }
+  },
+  {
+    test: /\.(css|sass|scss)$/,
+    use: ['css-loader', 'sass-loader'],
+  },
+]