Merge pull request #147 from ryoppippi/feature/add-webpack-example

feat: Add minimal webpack example
ryoppippi · Jun 25, 2024 · 197eae8 · 197eae8
2 parents 144782e + 0332014
commit 197eae8
Show file tree

Hide file tree

Showing 8 changed files with 163 additions and 0 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/examples/webpack-minimal/.gitignore b/examples/webpack-minimal/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/examples/webpack-minimal/index.html b/examples/webpack-minimal/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Webpack App</title>
+    </head>
+    <body>
+        <h1>Hello world!</h1>
+        <h2>Tip: Check your console</h2>
+    </body>
+
+    <script>
+        if ("serviceWorker" in navigator) {
+            window.addEventListener("load", () => {
+                navigator.serviceWorker
+                    .register("service-worker.js")
+                    .then((registration) => {
+                        console.log("Service Worker registered: ", registration);
+                    })
+                    .catch((registrationError) => {
+                        console.error("Service Worker registration failed: ", registrationError);
+                    });
+            });
+        }
+    </script>
+</html>
diff --git a/examples/webpack-minimal/package.json b/examples/webpack-minimal/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "webpack-minimal",
+  "private": true,
+  "devDependencies": {
+    "@types/node": "^20.14.2",
+    "@webpack-cli/generators": "^3.0.7",
+    "html-webpack-plugin": "^5.6.0",
+    "prettier": "^3.3.1",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "ts-patch": "^3.2.0",
+    "tsx": "^4.15.7",
+    "typescript": "~5.4.2",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "workbox-webpack-plugin": "^7.1.0"
+  },
+  "scripts": {
+    "build": "npm run register-config-webpack-to-ts-node webpack --mode=production --node-env=production",
+    "build:dev": "npm run register-config-webpack-to-ts-node webpack --mode=development",
+    "build:prod": "npm run register-config-webpack-to-ts-node webpack --mode=production --node-env=production",
+    "watch": "npm run register-config-webpack-to-ts-node webpack --watch",
+    "serve": "npm run register-config-webpack-to-ts-node webpack serve",
+    "register-config-webpack-to-ts-node": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\"",
+    "prepare": "ts-patch install && typia patch"
+  },
+  "dependencies": {
+    "@ryoppippi/unplugin-typia": "workspace:*",
+    "cross-env": "^7.0.3",
+    "typia": "^6.1.0"
+  }
+}
diff --git a/examples/webpack-minimal/src/index.ts b/examples/webpack-minimal/src/index.ts
@@ -0,0 +1,5 @@
+import typia from "typia";
+
+const result = typia.validate<{ ctmnumb: number }>({ ctmnumb: "123" });
+console.log("result", result);
+
diff --git a/examples/webpack-minimal/tsconfig-for-webpack-config.json b/examples/webpack-minimal/tsconfig-for-webpack-config.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "webpack.config.ts"
+  ]
+}
diff --git a/examples/webpack-minimal/tsconfig.json b/examples/webpack-minimal/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "plugins": [
+      {
+        "transform": "typia/lib/transform"
+      }
+    ],
+    "strictNullChecks": true,
+    "strict": true
+  },
+  "files": [
+    "src/index.ts"
+  ]
+}
diff --git a/examples/webpack-minimal/webpack.config.ts b/examples/webpack-minimal/webpack.config.ts
@@ -0,0 +1,65 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+import 'webpack-dev-server'
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import WorkboxWebpackPlugin from 'workbox-webpack-plugin';
+import { Configuration } from 'webpack';
+import * as tsx from 'tsx/cjs/api'
+
+const {default: UnpluginTypia}  = tsx.require('../../packages/unplugin-typia/src/webpack.ts', __filename)
+
+const isProduction = process.env.NODE_ENV == 'production';
+
+
+const config: Configuration = {
+    entry: './src/index.ts',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+    },
+    devServer: {
+        open: true,
+        host: 'localhost',
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'index.html',
+        }),
+        UnpluginTypia()     
+        // Add your plugins here
+        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(ts|tsx)$/i,
+                loader: 'ts-loader',
+                exclude: ['/node_modules/'],
+            },
+            {
+                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                type: 'asset',
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
+    },
+};
+
+module.exports = () => {
+    if (isProduction) {
+        config.mode = 'production';
+
+        if (config.plugins == null) {
+            config.plugins = []
+        }
+        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
+
+    } else {
+        config.mode = 'development';
+    }
+    return config;
+};