Merge pull request #330 from ryoppippi/feature/webpack

simplify webpack config
ryoppippi · Sep 18, 2024 · d498a5e · d498a5e
2 parents ca1f37b + 34d1770
commit d498a5e
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 81 deletions.
diff --git a/examples/webpack-minimal/webpack.config.ts b/examples/webpack-minimal/webpack.config.ts
@@ -4,62 +4,53 @@ 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)
+import { tsImport } from 'tsx/esm/api'
 
 const isProduction = process.env.NODE_ENV == 'production';
 
+module.exports = async () => {
+    /** we use tsImport because of development. However, in real-world projecct, just use `import` instead */
+    // const { default: UnpluginTypia } = await import('@ryoppippi/unplugin-typia/webpack');
+    const { default: UnpluginTypia } = await tsImport('@ryoppippi/unplugin-typia/webpack', __dirname);
 
-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/
+    return {
+        mode: isProduction ? 'production' : 'development',
+        entry: './src/index.ts',
+        output: {
+            path: path.resolve(__dirname, 'dist'),
+        },
+        devServer: {
+            open: true,
+            host: 'localhost',
+        },
+        plugins: [
+            new HtmlWebpackPlugin({
+                template: 'index.html',
+            }),
+            UnpluginTypia(),
+            isProduction && new WorkboxWebpackPlugin.GenerateSW(),
+            // Add your plugins here
+            // Learn more about plugins from https://webpack.js.org/configuration/plugins/
         ],
-    },
-    resolve: {
-        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
-    },
-};
+        module: {
+            rules: [
+                {
+                    test: /\.(ts|tsx)$/i,
+                    loader: 'ts-loader',
+                    exclude: ['/node_modules/'],
+                },
+                {
+                    test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                    type: 'asset',
+                },
 
-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;
+                // Add your rules for custom modules here
+                // Learn more about loaders from https://webpack.js.org/loaders/
+            ],
+        },
+        resolve: {
+            extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
+        },
+    } as const satisfies Configuration;
 };
+
diff --git a/packages/unplugin-typia/README.md b/packages/unplugin-typia/README.md
@@ -196,28 +196,22 @@ Examples:
 
 > ⚠️ Note: Currently, this plugin works only with 'esm' target.
 
-> If you want to use 'cjs' target on Node < 20.17.0 , please use with [`jiti`](https://github.com/unjs/jiti).
-> If you want to use 'cjs' target on Node >= 20.17.0, please use with `require` and enable [`--experimental-require-modules` flag](https://github.com/nodejs/node/pull/51977).
-> If you want to use 'esm' target, don't worry! You can use this plugin without any additional setup.
+> If you want to use 'cjs', use dynamic import.
 
-```sh
-npm install jiti
-```
+> If you want to use 'esm' target, don't worry! You can use this plugin without any additional setup.
 
 ```js
 // webpack.config.js
 
-// if you use Node < 20.17.0
-const jiti = require('jiti')(__filename);
-const { default: UnpluginTypia } = jiti('@ryoppippi/unplugin-typia/webpack');
-
-// if you use Node >= 20.17.0
-// const { default: UnpluginTypia } = require("@ryoppippi/unplugin-typia/webpack");
-
-module.exports = {
-	plugins: [
-		UnpluginTypia({ /* options */ }),
-	],
+module.exports = async () => {
+	const { default: UnpluginTypia } = await import('@ryoppippi/unplugin-typia/webpack');
+	return {
+		plugins: [
+			new UnpluginTypia({
+			// options
+			}),
+		],
+	};
 };
 ```
 

diff --git a/packages/unplugin-typia/src/webpack.ts b/packages/unplugin-typia/src/webpack.ts
@@ -11,8 +11,7 @@ import unplugin from './core/index.js';
  *
  * Currently, this plugin works only with 'esm' target.
  *
- * If you want to use 'cjs' target on Node < 20.17.0 , please use with [`jiti`](https://github.com/unjs/jiti).
- * If you want to use 'cjs' target on Node >= 20.17.0, please use with `require` and enable [`--experimental-require-modules` flag](https://github.com/nodejs/node/pull/51977).
+ * If you want to use 'cjs' use dynamic import
  * If you want to use 'esm' target, don't worry! You can use this plugin without any additional setup.
  *
  * Refer this issue https://github.com/samchon/typia/issues/1094
@@ -21,16 +20,16 @@ import unplugin from './core/index.js';
  * ```js
  * // webpack.config.js
  *
- * // if you use Node < 20.17.0
- * const jiti = require("jiti")(__filename);
- * const { default: UnpluginTypia } = jiti("@ryoppippi/unplugin-typia/webpack");
- *
- * // if you use Node >= 20.17.0
- * const { default: UnpluginTypia } = require("@ryoppippi/unplugin-typia/webpack");
- *
- * module.exports = {
- *  plugins: [UnpluginTypia({ /* your config *\/ })],
- * }
+ * module.exports = async () => {
+ *   const { default: UnpluginTypia } = await import('@ryoppippi/unplugin-typia/webpack');
+ *     return {
+ *       plugins: [
+ *         new UnpluginTypia({
+ *           // options
+ *         }),
+ *       ],
+ *     };
+ * };
  * ```
  *
  */