From 64a08fa87c9de5ea5aeac6ed07331813ae3b4bfc Mon Sep 17 00:00:00 2001
From: Budi Irawan <deerawan@gmail.com>
Date: Mon, 25 Apr 2022 10:56:45 +1000
Subject: [PATCH] docs (typescript): add guide for webpack config TS

Add a guide on how to use webpack configuration in Typescript  `webpack.config.ts`.

Fixes #6106
---
 src/content/guides/typescript.mdx | 40 +++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/content/guides/typescript.mdx b/src/content/guides/typescript.mdx
index 9e7c85bfbf5e..9feec657f046 100644
--- a/src/content/guides/typescript.mdx
+++ b/src/content/guides/typescript.mdx
@@ -9,6 +9,7 @@ contributors:
   - EugeneHlushko
   - chenxsan
   - snitin315
+  - deerawan
 ---
 
 T> This guide stems from the [_Getting Started_](/guides/getting-started/) guide.
@@ -94,6 +95,45 @@ module.exports = {
 
 This will direct webpack to _enter_ through `./index.ts`, _load_ all `.ts` and `.tsx` files through the `ts-loader`, and _output_ a `bundle.js` file in our current directory.
 
+Regarding webpack configuration, instead of using Javascript for `webpack.config.js`, we could use the Typescript version `webpack.config.ts`. This is possible by installing some packages below.
+
+```bash
+npm install --save-dev ts-node @types/webpack
+```
+
+`ts-node` is required by webpack to load the configuration in Typescript. `@types/webpack` is an optional to give typing information for webpack config.
+
+Let's see the Typescript version of webpack config file.
+
+**webpack.config.ts**
+
+```ts
+import * as path from 'path';
+import { Configuration } from 'webpack';
+
+const config: Configuration = {
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};
+
+export default config;
+```
+
 Now lets change the import of `lodash` in our `./index.ts` due to the fact that there is no default export present in `lodash` definitions.
 
 **./index.ts**