Integrate webpack into Visual Studio Code - convert to typescript

Try this guide and see if it works.

1. Install the webpack and webpack-cli packages globally using npm:
```bash
npm install -g webpack webpack-cli
```
2. In your project directory, create a new file called **webpack.config.js** with the following content:
```js
const path = require('path');

module.exports = {
entry: './src/app.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
};
```
This configuration file tells webpack to compile your TypeScript code (**app.ts**) into a JavaScript file (**bundle.js**) and output it to a directory called **dist**.
3. In Visual Studio Code, install the **webpack** and **webpack-cli** extensions.
4. In the Visual Studio Code menu, select View > Terminal to open a terminal window.
5. In the terminal window, navigate to your project directory.
6. Run the following command to install the **ts-loader** package:
```bash
npm install ts-loader --save-dev
```
7. Create a new folder called **src** in your project directory, and move your **app.ts** file into it.
8. Open the **app.ts** file in Visual Studio Code.
9. In the Visual Studio Code menu, select Terminal > Configure Tasks > Create tasks.json file from templates > Others.
10. Replace the contents of the tasks.json file with the following:
```json
{
"version": "2.0.0",
"tasks": [
{
"label": "webpack",
"type": "shell",
"command": "webpack --watch",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
```
This creates a new task called "webpack" that runs the webpack --watch command, which tells webpack to watch for changes to your TypeScript code and recompile it whenever you save your changes.
11. Save the **tasks.json** file.
12. Press **Ctrl+Shift+B** (Windows/Linux) to open the "Run Build Task" menu.
13. Select the "webpack" task from the menu to start the webpack watcher.

Now, whenever you save your app.ts file, webpack will automatically recompile it into a JavaScript file and output it to the dist directory. You can open the index.html file in your browser to see the results.