Bundler du TypeScript avec Webpack

Tu as du TypeScript, tu veux un seul fichier JS à balancer sur ton serveur. Pas besoin d'un framework complet pour ça — Webpack fait le job.

Le problème

Node.js ne comprend pas TypeScript nativement. Il faut le transpiler en JavaScript avant de pouvoir l'exécuter. Et si tu as plusieurs fichiers avec des imports partout, autant tout bundler en un seul fichier propre.

La structure du projet

1|-- src/
2|   |-- index.ts
3|-- build/          # JS transpilé
4|-- dist/           # Bundle final
5|-- package.json
6|-- tsconfig.json
7|-- webpack.config.js

Installation

1npm install typescript
2npm install -D webpack webpack-cli webpack-node-externals concurrently

Configuration TypeScript

Crée un tsconfig.json :

1{
2    "compilerOptions": {
3        "module": "commonjs",
4        "moduleResolution": "node",
5        "esModuleInterop": true,
6        "outDir": "build",
7        "target": "es2016"
8    },
9    "include": ["src"]
10}

En gros : on compile vers CommonJS (pour Node), on sort dans build/, et on cible ES2016.

Configuration Webpack

Crée un webpack.config.js :

1const path = require('path');
2const nodeExternals = require('webpack-node-externals');
3
4module.exports = {
5    target: 'node',
6    mode: 'development',
7    externals: [nodeExternals()],
8    entry: './build/index.js',
9    output: {
10        path: path.join(__dirname, 'dist'),
11        filename: 'bundle.js',
12    }
13}

Le point important : nodeExternals() exclut les node_modules du bundle. Pas besoin de tout embarquer — tu feras un npm install --production sur le serveur.

Scripts de dev

Dans ton package.json :

1"scripts": {
2    "watch-compile:server": "tsc --watch",
3    "watch-bundle:server": "webpack --watch",
4    "concurrent-watch": "concurrently npm:watch-*"
5}

Lance npm run concurrent-watch et c'est parti. À chaque modif, TypeScript compile, puis Webpack bundle.

Tip : Ajoute nodemon pour relancer Node automatiquement quand le bundle change.

Alternatives modernes

Soyons honnêtes : en 2024, Webpack n'est plus le seul choix. Si tu démarres un nouveau projet :

• esbuild — Ultra rapide, config minimale
• swc — Compilateur Rust, s'intègre bien avec Webpack
• Vite — Parfait pour le dev, utilise esbuild sous le capot

Webpack reste solide pour les projets complexes avec plein de plugins. Mais pour un truc simple, esbuild fait le taf en 10x moins de temps.