⚙ webpackからRspackに移行 (#27)

README.md

@@ -20,8 +20,8 @@
     <a href="https://phaser.io/" alt="Phaser">
     <img src="https://img.shields.io/badge/-Phaser-b61bf2" />
     </a>
-    <a href="https://webpack.js.org/" alt="Webpack">
-    <img src="https://img.shields.io/badge/-Webpack-222222?logo=webpack&logoColor=8dd6f9" />
+    <a href="https://www.rspack.dev/" alt="Rspack">
+    <img src="https://img.shields.io/badge/-Rspack-f28773" />
     </a>
     <a href="https://pages.github.com/" alt="GitHub Pages">
     <img src="https://img.shields.io/badge/-GitHub_Pages-222222?logo=GitHub+Pages&logoColor=ffffff" />

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "webpack --mode=development",
-    "dev": "webpack-dev-server --mode=development",
+    "build": "rspack build --mode=production",
+    "dev": "rspack serve",
     "format": "prettier --write './**/*.{js,ts,json,yaml,yml,md,html,css,scss}' --ignore-path '.gitignore'",
     "format:check": "prettier --check './**/*.{js,ts,json,yaml,yml,md,html,css,scss}' --ignore-path '.gitignore'",
     "lint": "eslint './src/**/*.ts' --ignore-path '.gitignore'",
@@ -14,6 +14,7 @@
   "keywords": [],
   "author": "",
   "devDependencies": {
+    "@rspack/cli": "^0.4.3",
     "@types/webfontloader": "^1.6.34",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "eslint": "^8.53.0",
@@ -24,12 +25,8 @@
     "eslint-plugin-promise": "^6.1.1",
     "prettier": "^3.0.3",
     "process": "^0.11.10",
-    "ts-loader": "^9.5.0",
     "typescript": "^5.2.2",
-    "util": "^0.12.5",
-    "webpack": "^5.0.0-rc.6",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.8.1"
+    "util": "^0.12.5"
   },
   "dependencies": {
     "axios": "^0.26.1",

webpack.config.js → rspack.config.js

@@ -1,5 +1,6 @@
-const path = require("path")
-const webpack = require("webpack")
+// @ts-check
+
+const rspack = require("@rspack/core")
 
 const date = new Date()
 const buildDate = `${date.getFullYear().toString().padStart(4, "0")}${(date.getMonth() + 1)
@@ -9,39 +10,37 @@ const buildDate = `${date.getFullYear().toString().padStart(4, "0")}${(date.getM
   .toString()
   .padStart(2, "0")}${date.getSeconds().toString().padStart(2, "0")}`
 
-module.exports = {
-  entry: {
-    bundle: "./src/app.ts",
-  },
+const isProduction = process.env.NODE_ENV === "production"
+
+/** @type {import('@rspack/cli').Configuration} */
+const config = {
+  entry: "./src/app.ts",
   output: {
-    path: path.join(__dirname, "dist"),
-    filename: "[name].js",
-  },
-  resolve: {
-    extensions: [".ts", ".js"],
-    fallback: { util: require.resolve("util/") },
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      process: "process/browser",
-    }),
-    new webpack.DefinePlugin({
-      "process.env.SERVER_URL": JSON.stringify(process.env.SERVER_URL),
-      "process.env.BUILD_DATE": JSON.stringify(buildDate),
-      "process.env.CREDITS": JSON.stringify(process.env.CREDITS),
-    }),
-  ],
-  devServer: {
-    static: {
-      directory: path.join(__dirname, "dist"),
-    },
+    filename: "bundle.js",
+    path: "./dist/",
   },
   module: {
     rules: [
       {
         test: /\.ts$/,
-        loader: "ts-loader",
+        use: "builtin:swc-loader",
       },
     ],
   },
+  devServer: { static: { directory: "./dist/" } },
+  builtins: {
+    define: {
+      "process.env.SERVER_URL": JSON.stringify(process.env.SERVER_URL),
+      "process.env.BUILD_DATE": JSON.stringify(buildDate),
+      "process.env.CREDITS": JSON.stringify(process.env.CREDITS),
+    },
+  },
+  plugins: [
+    new rspack.ProvidePlugin({
+      process: [require.resolve("process/browser")],
+    }),
+  ],
+  devtool: isProduction ? false : "source-map",
 }
+
+module.exports = config