feat(webpack): update config

package.json

@@ -22,12 +22,11 @@
   ],
   "scripts": {
     "start": "node ./dist/server.js",
-    "build:client": "webpack --config ./webpack/.client.js --mode=production",
-    "build:server": "webpack --config ./webpack/.server.js --mode=production",
     "build": "yarn build:server && yarn build:client",
+    "build:client": "webpack --config ./webpack/client/index.js --mode=production",
+    "build:server": "webpack --config ./webpack/server/index.js --mode=production",
     "watch": "webpack --config ./webpack/index.js --mode=development --watch",
-    "lint": "eslint \"./**/*.{js,ts,tsx}\" --ignore-path .gitignore --fix",
-    "format": "prettier --write \"src/**/*.{ts,tsx,json}\""
+    "lint": "eslint \"./**/*.{js,ts,tsx}\" --ignore-path .gitignore --fix"
   },
   "dependencies": {
     "dayjs": "1.11.5",
@@ -60,7 +59,6 @@
     "copy-webpack-plugin": "12.0.2",
     "eslint": "8.56.0",
     "eslint-plugin-import": "2.29.1",
-    "prettier": "3.0.3",
     "ts-loader": "9.5.1",
     "typescript": "5.5.3",
     "webpack": "5.93.0",

webpack/client/index.js

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const alias = require("alias-reuse");
+const CopyPlugin = require("copy-webpack-plugin");
+const HtmlPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+const ROOT = path.resolve(__dirname, "../..");
+const OUTPUT = path.resolve(ROOT, "dist/public");
+
+const tsconfig = path.resolve(ROOT, 'tsconfig.json');
+
+module.exports = () => ({
+  name: "Client",
+  target: "web",
+  entry: path.resolve(ROOT, "src/client/index.tsx"),
+  resolve: {
+    extensions: [".js", ".ts", ".tsx"],
+    alias: alias.reuse().from(tsconfig).for("webpack"),
+  },
+  output: {
+    path: OUTPUT,
+    filename: "bundle.[fullhash].js",
+    clean: true,
+  },
+  devtool: "source-map",
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "babel-loader",
+          },
+          {
+            loader: "ts-loader",
+            options: {
+              configFile: path.resolve(__dirname, "tsconfig.json"),
+            },
+          },
+        ],
+        include: /src\/(client|shared)/,
+      },
+      {
+        test: /\.(svg|png|ttf|woff|woff2)$/,
+        exclude: /node_modules/,
+        type: "asset/resource",
+        generator: {
+          filename: "assets/[hash][ext]",
+        },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlPlugin({
+      minify: false,
+      template: "src/client/index.html",
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(ROOT, "src/client/assets"),
+          to: path.resolve(OUTPUT, "assets"),
+        },
+      ],
+    }),
+  ],
+  performance: {
+    hints: false,
+  },
+  stats: {
+    all: false,
+    builtAt: true,
+    errors: true,
+    warnings: true,
+    timings: true,
+    colors: true,
+  },
+});

webpack/client/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "include": [
+    "../../src/client/**/*.ts",
+    "../../src/shared/**/*.ts",
+    "../../src/*.d.ts"
+  ]
+}

webpack/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable global-require */
 module.exports = [
-  require('./.server'),
-  require('./.client'),
+  require('./server'),
+  require('./client'),
 ];

webpack/server/index.js

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const alias = require("alias-reuse");
+const path = require("path");
+
+const ROOT = path.resolve(__dirname, "../..");
+
+const tsconfig = path.resolve(ROOT, 'tsconfig.json');
+
+module.exports = () => ({
+  name: "Server",
+  target: "node",
+  entry: path.resolve(ROOT, "src/server/index.ts"),
+  resolve: {
+    extensions: [".js", ".ts"],
+    alias: alias.reuse().from(tsconfig).for("webpack"),
+  },
+  output: {
+    path: path.resolve(ROOT, "dist"),
+    filename: "server.js",
+  },
+  devtool: "source-map",
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              configFile: path.resolve(__dirname, "tsconfig.json"),
+            },
+          },
+        ],
+        include: /src\/(server|shared)/,
+      },
+    ],
+  },
+  externals: [
+    "bufferutil",
+    "utf-8-validate",
+  ],
+  optimization: {
+    minimize: false,
+  },
+  performance: {
+    hints: false,
+  },
+  stats: {
+    all: false,
+    builtAt: true,
+    errors: true,
+    warnings: true,
+    timings: true,
+    colors: true,
+  },
+});

webpack/server/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "include": [
+    "../../src/server/**/*.ts",
+    "../../src/shared/**/*.ts",
+    "../../src/*.d.ts"
+  ]
+}