Setting Up Webpack and Typescript

Posted on: May 08, 2020 by Wisdom Ekpot

Webpack is a fast, efficient, very powerful code bundler. TypeScript is a compiler (or transpiler if you prefer) which adds support for type checking to your project. In this article, we will set up our typescript application using Webpack.
We will start by creating a new folder on our desktop for this application. I will use the terminal to do that:

cd desktop 
mkdir typescriptconfig && cd typescriptconfig
npm init -y

This will create a new folder on our desktop, after creating it we will use the cd command to move into the folder. The npm init -y will set up a node project for us. Running this command will create a package.json file, this is where we will store all our project dependencies.

Next, we’ll use npm to install Webpack and TypeScript.


npm i webpack webpack-dev-server typescript ts-loader

The webpack-dev-server will help us spin up a server running on port 8080 by default. The ts-loader package is a typescript loader for Webpack.
Next up, we need to install webpack-cli as a dev dependency:

npm i webpack-cli -D

The -D command will install webpack-cli as a dev-dependency.Now that we have everything installed we need to modify the script section in our package.json file to this:


"scripts": {
    "start": "webpack-dev-server --mode development"
  },

Now to run our application we will run the npm run start command.
We will create a .gitignore file and add the node_module file there so that git will ignore the folder when committing.

Configuring Webpack

To configure Webpack in our application, we will create a webpack.config.js file and paste the following code:


const path = require('path');
module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.ts', '.js', '.tsx']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

Let me explain what is happening here.We start by setting our applications entry point to ./src/index.ts. This is where we will be writing codes for our application.Since we are using Typescript we nee d to bring in the ts-loader module that we installed.This module is located in the node_module folder.We set a resolver for all file extensions with .js,.ts,and .tsx. The output object will bundle our application into a bundle.js file inside the dist folder.

Next up we need to configure Typescript for this application too.To do that create a tsconfig.json file an paste this code:


{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Basically what this does is to allow us to use es2017 JavaScript (es8) while compiling down to 2015 (es6).

Next up we will create an index.html file. We will link our bundled js file to this index.html file. Note that this just a simple HTML boilerplate.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    /bundle.js
</body>
</html>

We need to create the index.ts file inside the src folder that we specified in our webpack configuration.
Create that file and add a simple code that will log Hello World on our console.


console.log('Hello World')

After doing all this we can test our application by running npm run start on our terminal.This will open up our application on port 8080 which is the default webpack port.Open up that port on your browser and open up the console.You should see Hello World printed on the console.

Conclusion

Setting up Webpack in an application is quite easy and fast. Webpack offers great tooling such as Hot Module Reloading which exchanges, adds, or removes modules while an application is running, without a full reload. Knowing how to configure Webpack will help you work faster with frontend applications like Vuejs and Reactjs.