Change webpack configs to ts.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@aleleba/create-react-ssr",
-      "version": "2.0.3",
+      "version": "2.0.4",
       "license": "MIT",
       "dependencies": {
         "@babel/register": "^7.17.7",
@@ -53,6 +53,7 @@
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
         "@types/webpack-hot-middleware": "^2.25.6",
+        "@types/webpack-node-externals": "^2.5.3",
         "@typescript-eslint/eslint-plugin": "^5.25.0",
         "@typescript-eslint/parser": "^5.25.0",
         "babel-jest": "^28.1.0",
@@ -3576,6 +3577,16 @@
         "webpack": "^5"
       }
     },
+    "node_modules/@types/webpack-node-externals": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@types/webpack-node-externals/-/webpack-node-externals-2.5.3.tgz",
+      "integrity": "sha512-A9JxaR8QXoYT95egET4AmCFuChyTlP8d18ZAnmSHuIMsFdS7QlCQQ8pmN/+FHgLIkm+ViE/VngltT5avLACY9A==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "webpack": "^5"
+      }
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -18165,6 +18176,16 @@
         "webpack": "^5"
       }
     },
+    "@types/webpack-node-externals": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@types/webpack-node-externals/-/webpack-node-externals-2.5.3.tgz",
+      "integrity": "sha512-A9JxaR8QXoYT95egET4AmCFuChyTlP8d18ZAnmSHuIMsFdS7QlCQQ8pmN/+FHgLIkm+ViE/VngltT5avLACY9A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "webpack": "^5"
+      }
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",

package.json

@@ -1,13 +1,13 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Starter Kit of server side render of react",
   "bin": "./bin/cli.js",
   "main": "src/server/index",
   "scripts": {
     "start": "node build/server/app-server.js",
-    "start:dev": "rm -rf build && webpack --mode=development --config webpack.config.dev.server.js && node build/server.js",
+    "start:dev": "rm -rf build && webpack --mode=development --config webpack.config.dev.server.ts && node build/server.js",
-    "build": "webpack-cli --config webpack.config.js",
+    "build": "webpack-cli --config webpack.config.ts",
     "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
     "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
     "test": "jest",
@@ -69,6 +69,7 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
     "@types/webpack-hot-middleware": "^2.25.6",
+    "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "babel-jest": "^28.1.0",

tsconfig.json

@@ -7,7 +7,6 @@
       "esnext"
     ],
     "allowJs": true,
-    "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
@@ -27,7 +26,9 @@
     ],
     "sourceMap": true,
     "baseUrl": "**/*",
-    "outDir": "build"
+    "outDir": "build",
+    "skipLibCheck": true,
+    "noImplicitAny": false
   },
   "include": [
     "**/*"

webpack.config.dev.server.ts

@@ -1,15 +1,16 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-const webpackNodeExternals = require('webpack-node-externals');
+import webpackNodeExternals from 'webpack-node-externals';
-const path = require('path');
+import path from 'path';
+import { Configuration } from 'webpack';
 const ROOT_DIR = path.resolve(__dirname);
-const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
+const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args);
 const BUILD_DIR = resolvePath('build');
 const scriptExtensions = /\.(tsx|ts|js|jsx|mjs)$/;
 const styleExtensions = /\.(css|less|styl|scss|sass|sss)$/;
 const fontsExtensions = /\.(eot|otf|ttf|woff|woff2)$/;
 const fontsAndImagesExtensions = /\.(png|jpg|jpeg|gif|svg|ico|mp4|avi|ttf|otf|eot|woff|woff2|pdf)$/;
 
-module.exports = {
+const config: Configuration = {
   target: 'node',
   mode: 'development',
   name: 'server',
@@ -82,4 +83,6 @@ module.exports = {
         filename: 'assets/app.css',
     }),
   ],
-};
+};
+
+export default config

webpack.config.dev.ts

@@ -1,16 +1,19 @@
-const path = require('path');
+import path from 'path';
-const dotenv = require('dotenv').config();
+import * as dotenv from 'dotenv';
-const webpack = require('webpack');
+import webpack, {Configuration} from 'webpack';
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
-const ESLintPlugin = require('eslint-webpack-plugin');
+import ESLintPlugin from 'eslint-webpack-plugin';
-const CopyPlugin = require('copy-webpack-plugin');
+import CopyPlugin from 'copy-webpack-plugin';
+
+const dotEnvToParse = dotenv.config();
+
 const ROOT_DIR = path.resolve(__dirname);
-const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
+const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args);
 const BUILD_DIR = resolvePath('build');
 const PUBLIC_URL = process.env.PUBLIC_URL || '/';
 
-module.exports = {
+const config: Configuration = {
 	entry: ['webpack-hot-middleware/client?path=/reload_wss&timeout=2000&reload=true&autoConnect=true', `${ROOT_DIR}/../src/frontend/index.tsx`],
 	output: {
 		path: BUILD_DIR,
@@ -70,7 +73,7 @@ module.exports = {
 		}),
 		new ESLintPlugin(),
 		new webpack.DefinePlugin({
-			'process.env': JSON.stringify(dotenv.parsed),
+			'process.env': JSON.stringify(dotEnvToParse.parsed),
 			'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL),
 		}),
 		new CopyPlugin({
@@ -101,7 +104,7 @@ module.exports = {
 					priority: 1,
 					filename: 'assets/vendor.js',
 					enforce: true,
-					test (module, chunks){
+					test (module: { nameForCondition: () => any; }, chunks: { name: string; }){
 						const name = module.nameForCondition && module.nameForCondition();
 						return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);  
 					},
@@ -110,3 +113,5 @@ module.exports = {
 		},
 	},
 };
+
+export default config

webpack.config.ts

@@ -1,14 +1,17 @@
-const path = require('path');
+import path  from 'path';
-const dotenv = require('dotenv').config();
+import * as dotenv from 'dotenv';
-const webpack = require('webpack');
+import webpack from 'webpack';
-const CompressionWebpackPlugin = require('compression-webpack-plugin');
+import CompressionWebpackPlugin from 'compression-webpack-plugin';
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-const TerserPlugin = require('terser-webpack-plugin');
+import TerserPlugin from 'terser-webpack-plugin';
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-const ESLintPlugin = require('eslint-webpack-plugin');
+import ESLintPlugin from 'eslint-webpack-plugin';
-const CopyPlugin = require('copy-webpack-plugin');
+import CopyPlugin from 'copy-webpack-plugin';
+
+const dotEnvToParse = dotenv.config();
+
 const ROOT_DIR = path.resolve(__dirname);
 const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
 const BUILD_DIR = resolvePath('build');
@@ -86,7 +89,7 @@ const frontendConfig = {
 		}),
 		new ESLintPlugin(),
 		new webpack.DefinePlugin({
-			'process.env': JSON.stringify(dotenv.parsed),
+			'process.env': JSON.stringify(dotEnvToParse.parsed),
 			'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL),
 		}),
 		new CopyPlugin({
@@ -203,7 +206,7 @@ const serverConfig = {
 		new CleanWebpackPlugin(),
 		new ESLintPlugin(),
 		new webpack.DefinePlugin({
-			'process.env': JSON.stringify(dotenv.parsed),
+			'process.env': JSON.stringify(dotEnvToParse.parsed),
 			'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL),
 		}),
 		new InjectManifest({
@@ -237,4 +240,4 @@ const serverConfig = {
 	},
 };
   
-module.exports = [frontendConfig, serverConfig];
+export default [frontendConfig, serverConfig];