How to Create a New Typescript Project Using Webpack 3

Hello again guys.
This time we will create a typescript project using webpack 3.
The typescript version I use in this example is 2.4.2 which is the latest typescript version at the time I am writing this article.
I've got the idea for creating this article while watching a great tutorial about javascript and webpack.

The requirements to follow this article is to have NodeJS platform installed in your system (I prefer the LTS version).
I am using MacOS, I have already installed NodeJS and I used homebrew package manager to install nvm (a nodejs version manager).

First let's open WebStorm and create a new Empty Project :

File -> New -> Project

Here we select Empty Project and we write a name for our project in the place of the untitled string in the path (mine is /Users/administrator/WebstormProjects/untitled).
I have chosen to name this project WebpackTypescript1.

You can find this project here : https://github.com/skiabox/WebpackTypescript1

The first move after the Empty Project creation is to open a terminal window inside WebStorm.
There we write :

npm init --yes

to create our package.json file.

Now we are ready to install our development npm packages.
Write the following :

npm install --save-dev css-loader style-loader ts-loader tslint tslint-loader typescript webpack webpack-dev-server

Now let's create the css folder of the project under src using webstorm.
Inside css folder we create two css files.

main.css :

input-elements.css :

Now let's create the index.html file that will use these 2 css files.
As you can clearly see there is no reference to these 2 css files inside the html code because we will import them from inside the typescript code!
Let's get started.

Create an index.html file at the root folder of our project:

Ok now it's a good time to use add some configuration files for typescript and tslint :

Type at the terminal line:

tslint -init

and use the following tslint.json file

After that try at the terminal line:

tsc -init

and use the following tsconfig.json file

Now it is a good time to create our webpack.config.js file inside our root folder.
Create the file and copy the following code into it:

Now let's create a js folder and then we will create two files inside them.

dom-loader.ts :

and app.ts :

The only remaining piece of code is to add a couple of scripts inside our package.json file that contains all our dependencies we installed earlier.
So use this package.json file :

We are nearly finished now.
Just type at the command line the following:

npm run build

For any questions you might have don't hesitate to answer below my post!