Using TypeScript in HTML with Webpack Setup

February, 8th 2025 3 min read

TypeScript has become the de‑facto standard for writing reliable, well‑typed JavaScript applications. But using TypeScript directly inside a simple HTML page is not possible without a build tool. Modern browsers cannot execute .ts files natively, so a bundler must compile TypeScript into JavaScript.

This guide provides a complete, updated 2025 workflow using Webpack, covering configuration, project structure, scripts, optimization, debugging, and production builds. It goes beyond basic examples to help you set up TypeScript in a scalable front‑end environment.

1. Project Setup

Start by creating a new project folder:

bash

mkdir ts-webpack-demo
cd ts-webpack-demo
npm init -y

Install Webpack, TypeScript, and supporting tools:

bash

npm install typescript webpack webpack-cli ts-loader --save-dev

Optional (but recommended):

bash

npm install webpack-dev-server html-webpack-plugin --save-dev

These packages enable live reloading and automatic HTML generation.

2. Configure TypeScript

Create tsconfig.json:

json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "Node",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

Why this configuration matters:

sourceMap: true → enables browser debugging with original .ts files
strict: true → full type‑safety
module: ESNext → Webpack handles bundling, not TypeScript

3. Configure Webpack

Create webpack.config.js:

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

module.exports = {
  entry: "./src/index.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true
  },
  mode: "development",
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: "./src/index.html"
    })
  ],
  devServer: {
    static: "./dist",
    hot: true,
    port: 3000
  }
};

Notable improvements over basic configs:

clean: true cleans dist/ automatically
HtmlPlugin generates HTML with injected scripts
devServer gives hot reloading

4. Write TypeScript Code

Create file structure:

plaintext

src/
 ├── index.ts
 ├── math.ts
 └── index.html

src/math.ts:

export function multiply(a: number, b: number): number {
  return a * b;
}

export function formatResult(x: number): string {
  return `Result: ${x}`;
}

src/index.ts:

import { multiply, formatResult } from "./math";

const button = document.createElement("button");
button.textContent = "Calculate 7 × 6";
document.body.appendChild(button);

button.addEventListener("click", () => {
  const result = multiply(7, 6);
  console.log(formatResult(result));
  alert(formatResult(result));
});

5. HTML Template

src/index.html:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TypeScript + Webpack</title>
  </head>
  <body>
    <h1>TypeScript in HTML with Webpack</h1>
  </body>
</html>

Webpack will inject the final bundle.js automatically.

6. Build and Run Project

Development mode (live reload):

bash

npx webpack serve

Open:
http://localhost:3000

Manual build:

bash

npx webpack

Build output appears in /dist.

7. Production Build

Create optimized JS:

bash

npx webpack --mode production

This generates:

minified JavaScript
tree‑shaken modules
no sourcemaps

Ideal for deployment.

8. Debugging TypeScript in Browser

Because we enabled Sourcemaps:

json

"sourceMap": true

Chrome/Firefox lets you debug .ts files directly:

Press F12
Open Sources
Your TypeScript appears under webpack://

9. Common Errors + Fixes

❌ “Cannot use import statement outside a module”

Fix:
Ensure your script tag is NOT pointing to TypeScript:

Wrong:

html

<script src="./src/index.ts"></script>

Right:

html

<script src="bundle.js"></script>

❌ Module not found: Can’t resolve ’./file’

Fix:

Paths must be relative
File extensions must match
Webpack resolve.extensions must include .ts

❌ ts-loader slow in large projects

Use:

bash

npm install fork-ts-checker-webpack-plugin --save-dev

Then add plugin for parallel type-checking.

10. Final Folder Structure

plaintext

ts-webpack-demo/
 ├── src/
 │    ├── index.ts
 │    ├── math.ts
 │    └── index.html
 ├── dist/
 ├── tsconfig.json
 ├── webpack.config.js
 ├── package.json
 └── node_modules/

Conclusion

Webpack remains one of the most reliable bundlers for integrating TypeScript into an HTML application. It provides:

modular code organization
fast dev server
optimized production builds
full debugging support
automatic HTML script injection

This setup scales from small demos to large front‑end applications.

Use this guide as a baseline for TypeScript projects that require clean, maintainable builds and a professional workflow.

Using TypeScript in HTML with Webpack Setup

1. Project Setup

2. Configure TypeScript

3. Configure Webpack

4. Write TypeScript Code

5. HTML Template

6. Build and Run Project

Development mode (live reload):

Manual build:

7. Production Build

8. Debugging TypeScript in Browser

9. Common Errors + Fixes

❌ “Cannot use import statement outside a module”

❌ Module not found: Can’t resolve ’./file’

❌ ts-loader slow in large projects

10. Final Folder Structure

Conclusion

More from typescript