Sujay Kundu

Webpack Configuration (part-4) – Setup Typescript

Install this dependencies

$ npm install --save-dev typescript ts-loader

Add the scripts in package.json

    "scripts": {
      "build": "webpack",
      "start": "webpack serve",

Init a Tsconfig file :

tsc --init
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true

These options instruct the TypeScript compiler to:

  • Target ES5 syntax for better browser compatibility
  • Use CommonJS modules
  • Enable strict type checking
  • Use Node-style module resolution
  • Output the compiled JavaScript files to the dist directory
  • Generate source maps for easier debugging

Update the webpack.config.js like this :

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

const config = {
  mode: "development", // Defines the mode to pass to webpack.
  entry: "./src/index.ts", // The entry point(s) of your application e.g. ./src/main.js.
  output: {
    // Output location of the file generated by webpack e.g. ./dist/.
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
  devtool: "source-map",
  devServer: {
    historyApiFallback: true,
    static: {
      directory: path.join(__dirname, "public"), // Directory for static contents.
    compress: true, //  Enables gzip compression for everything served.
    port: 9000, // Allows to specify a port to use.
    hot: true, //  Enables Hot Module Replacement.
    open: true, //  Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).
    liveReload: true, // Enables reload/refresh the page(s) when file changes are detected (enabled by default).
    client: {
      progress: true, // Prints compilation progress in percentage in the browser.
  plugins: [
    new HtmlWebpackPlugin({
      title: "Output Management",
      template: "./public/index.html", // Specify the path to your existing index.html
      filename: "index.html",
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
  module: {
    rules: [
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
  resolve: {
    extensions: [".tsx", ".ts", ".js"],

module.exports = config;

We have updated the module rules to include the ts-loader and also updated the resolve extentions. We added the devtools to source-map.

Update the index.js to index.ts and also update the entry point in webpack.config.js

// entry index.js
console.log("hello world");

function greet(name: string): string {
  return `Hello, ${name}!`;

const user = "TypeScript Developer";


Cool !

Now the index.html should be the same like previous

<!DOCTYPE html>
 <html lang="en-US">
        <title> TS Webpack Boilerplate </title>

        <meta name="charset" content="UTF-8" />
        <meta name="description" content="TS Webpack Boilerplate App" />
        <meta name="keywords" content="javascript, typescript, webpack, ts-boilerplate, webpack-boilerplate" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" type="text/css" href="./styles/global.css" />
            <div id="logo-container">
                <h1> TS WEBPACK BOILERPLATE</h1>
            <div id="nav-container">
                <nav aria-label="Navigation">
                     <ul role="menu" aria-label="menu">
                        <li role="menuitem" aria-label="Home">
                            <a href="/"> Home </a>
                        <li role="menuitem" aria-label="About">
                            <a href="/about"> About </a>
                        <li role="menuitem" aria-label="Contact">
                            <a href="/contact"> Contact </a>

            <h1 id="main-heading"> This is a setup built on Webpack, Typescript, SAAS</h1>

            <div id="app"></div>

            <p>© 2023</p>

Running the app,

First we need to tell webpack to bundle our application, run the following command

$ npm run build

Then to start the app :

$ npm run start

The app should be up at http://localhost:9000

Great ! It works. In the next part, we will see how to setup more configurations like SaaS, eslint etc. with Webpack.

You can refer to the following Github Commit for reference