add typescript for webpack

dist/main-318575f579f66b458d2a.bundle.js

@@ -0,0 +1,32 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./index.ts":
+/*!******************!*\
+  !*** ./index.ts ***!
+  \******************/
+/***/ (() => {
+
+eval("console.log('Webpack with typescript');\n\n//# sourceURL=webpack:///./index.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./index.ts"]();
+/******/ 	
+/******/ })()
+;

package.json

@@ -0,0 +1,14 @@
+{
+  "devDependencies": {
+    "@types/node": "^17.0.40",
+    "@types/webpack": "^5.28.0",
+    "cross-env": "^7.0.3",
+    "ts-node": "^10.8.1",
+    "tsconfig-paths": "^4.0.0",
+    "typescript": "^4.7.3",
+    "webpack-cli": "^4.9.2"
+  },
+  "scripts": {
+    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack --mode=development"
+  }
+}

src/index.ts

@@ -0,0 +1 @@
+console.log('Webpack with typescript');

tsconfig-for-webpack-config.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true
+  }
+}

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node"
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  }
+}

webpack.config.ts

@@ -0,0 +1,15 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+// in case you run into any typescript error when configuring `devServer`
+// import 'webpack-dev-server';
+
+const config: webpack.Configuration = {
+  context: path.resolve(__dirname, 'src'),
+  entry: './index.ts',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name]-[hash].bundle.js',
+  },
+};
+
+export default config;