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.
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.
We are ready now 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
Our next step is about creating the css folder of the project under src using webstorm.
Inside css folder we create two css files.
Moving on with this project this is the perfect moment to 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:
and use the following tslint.json file
After that try at the terminal line:
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:
Next let’s create a js folder and then we will create two files inside them.
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!