Webpack

Testing 🟡 Mid

Definition

Bundler JavaScript historique et ultra-configurable. Transforme les modules, assets et dependances en bundles optimises pour le navigateur. Ecosysteme de plugins et loaders tres riche.

Analogie

Comme une usine d'assemblage automobile : extremement flexible et puissante, mais complexe a configurer et maintenir.

Exemple de code

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.[contenthash].js' },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  },
};

Cas d'usage

Pour les projets legacy ou les cas necessitant une configuration fine du bundling avec des plugins specifiques.

Anti-pattern

Demarrer un nouveau projet avec Webpack alors que Vite offre une meilleure DX et des performances superieures.
#build#tooling#bundler