Setting Up TypeScript with Webpack

In modern web development, build tools are essential for bundling and optimizing code. TypeScript works seamlessly with webpack, a popular module bundler. This guide walks you through the complete setup process.

Project Initialization

First, initialize a new Node.js project by running the following command in your project root:

npm init -y

This creates a package.json file with default settings.

Installing Dependencies

Install the required packages to webpack, TypeScript, and related plugins:

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin

The installation includes seven packages:

• webpack - The core bundling tool
• webpack-cli - Command-line interface for webpack
• webpack-dev-server - Development server with live reloading
• typescript - TypeScript compiler
• ts-loader - TypeScript loader for webpack
• html-webpack-plugin - Generates HTML files automaticallly
• clean-webpack-plugin - Cleans the output directory before each build

Configuring Webpack

Create a webpack.config.js file in your project root with the following configuration:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    optimization: {
        minimize: false
    },

    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist',
        port: 3000
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        environment: {
            arrowFunction: false
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },
    
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: {
                    loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'TypeScript Demo'
        })
    ]
};

Configuring TypeScript

Create a tsconfig.json file in the root directory with your preferred compiler options:

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

Updating Package.json Scripts

Add the following scripts to your package.json file:

{
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --open"
  }
}

Building and Running

Create your TypeScript files in the src directory. To compile your code, run:

npm run build

To start the development server with live reloading:

npm start

Adding Babel for Cross-Browser Comptaibility

While webpack handles TypeScript compilation, Babel provides better browser compatibility by transpiling modern JavaScript to older versions.

Installing Babel Dependencies

npm i -D @babel/core @babel/preset-env babel-loader core-js

These four packages include:

• @babel/core - Core Babel functionality
• @babel/preset-env - Smart preset for transpilation
• babel-loader - Babel loader for webpack
• core-js - Polyfills for ES6+ features

Updating Webpack Configuration

Modify the module.rules section in your webpack configuration to include Babel:

module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets": {
                                        "chrome": "58",
                                        "firefox": "60",
                                        "edge": "80"
                                    },
                                    "corejs": "3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader"
                }
            ],
            exclude: /node_modules/
        }
    ]
}

With this configuration, TypeScript code flows through ts-loader first, then Babel processes the output for broader browser support. Adjust the targets object to specify which browsers your application needs to support.