# Hello World in Typescript with Webpack

This walkthrough demonstrates how to setup a typescript project with a webpack server using npm.

### Pre-requisites
You need to have node.js / npm installed on your local machine.

### Steps
1. Create a new ``project`` folder and navigate into it through cmd

```
> mkdir project
> cd project
```

2. Inside of the ``project`` folder, run the following command and fill out the prompts. This creates a ``package.json`` file for your project.

```
> npm init
```

3. Install ``typescript`` if not already done.
	* `npm i typescript -g` to install globally
	* `npm i typescript --save-dev` to install locally for this project
4. Create your typescript compiler using one of the two commands below. This creates a ``tsconfig.json`` file with default properties populated.
	* `tsc --init` to init using globally installed typescript
	* `npx tsc --init` to init using local project typescript
5. Create a new sub-directory in your ``project`` directory called ``src``.

```
> mkdir src
```

6. Create a new ``main.ts`` file using any text-editor or js IDE within your ``project`` directory. Paste the following (placeholder/example) code in the ``main.ts`` file and save it.

```typescript
const world = 'David';

export function hello(word: string = world): string {
  return `Hello ${world}! `;
}

(function () {
	console.log(hello());
}) ();
```

7. Install webpack, webpack-dev-server, webpack-cli, and ts-loader via npm

```
npm install webpack webpack-dev-server webpack-cli ts-loader --save-dev
```

8. Create a new ``webpack.config.js`` file in your main ``project`` directory.

9. Open ``webpack.config.js`` in a text-editor or js IDE, paste the following code, and save it.

```typescript
 module.exports = {
	entry: './src/index.ts',
	output: {
		filename: 'bundle.js',
		path: __dirname
	},
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				loader: 'ts-loader',
				exclude: /node_modules/,
			},
		]
	},
	resolve: {
		extensions: [".tsx", ".ts", ".js"]
	},
};
```

10. Open up ``package.json`` and add the following line to the ``scripts`` section, then save:

```json
"start": "webpack-dev-server"
```

11. Run ``> npm start`` from cmd in order to serve the project.