Vite, Webpack, and ts-node - Textnotes

Vite, Webpack, and ts-node

Learn how to set up and optimize build tools for TypeScript projects. This module explains Vite configuration, Webpack basics, and using ts-node for development and testing

1. Vite Configuration

Vite is a modern, fast build tool for frontend and TypeScript projects.

Installation


npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Vite Config (vite.config.ts)


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
plugins: [react()],
server: {
port: 3000
},
build: {
outDir: "dist"
}
});

Vite provides fast hot module replacement, TypeScript support, and optimized production builds.

2. Webpack Basics

Webpack bundles JavaScript and TypeScript modules for deployment.

Installation


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

Basic Webpack Configuration (webpack.config.js)


const path = require("path");

module.exports = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
};

Webpack handles module bundling, TypeScript compilation via ts-loader, and output optimization for production.

3. ts-node Usage

ts-node allows running TypeScript files directly without pre-compilation, useful for scripts and development.

Installation


npm install ts-node typescript --save-dev

Example


npx ts-node src/index.ts

Programmatic Usage


// run-script.ts
import { exec } from "child_process";

exec("npx ts-node src/index.ts", (error, stdout) => {
if (error) console.error(error);
console.log(stdout);
});

Using ts-node accelerates development by avoiding intermediate compilation steps.

Conclusion

Build tools like Vite, Webpack, and ts-node streamline TypeScript development and production workflows. Proper configuration enhances build speed, simplifies development, and ensures optimized output for scalable applications.