Bundlers – Webpack, Vite, and Rollup with TypeScript

Webpack + ts-loader

npm i -D webpack webpack-cli ts-loader

webpack.config.js

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

Vite (fast dev server)

npm i -D vite

vite.config.ts

import { defineConfig } from 'vite';
export default defineConfig({
  esbuild: { loader: 'ts', target: 'es2022' },
});

package.json

"scripts": { "dev": "vite" }

Rollup (library bundling)

npm i -D rollup @rollup/plugin-typescript

rollup.config.js

import typescript from '@rollup/plugin-typescript';
export default {
  input: 'src/index.ts',
  output: [{ file: 'dist/bundle.cjs.js', format: 'cjs' }, { file: 'dist/bundle.esm.js', format: 'es' }],
  plugins: [typescript()],
};