Générateur de configuration Webpack

Sortie par défaut

Avec les valeurs par défaut (mode production, TypeScript, Babel, un loader CSS et HtmlWebpackPlugin), le générateur produit :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
    clean: true,
  },
  resolve: { extensions: ['.ts','.tsx','.js'] },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

Ce que chaque option écrit

Choix fixés dans la sortie

Pour garder la configuration de départ propre, quelques valeurs sont fixées pour vous plutôt qu’exposées comme des champs :

• Noms de fichiers hachés. output.filename est toujours bundle.[contenthash].js, ce qui invalide le cache du navigateur chaque fois que le bundle change.
• Sortie propre. output.clean: true vide le dossier de sortie à chaque build, le remplacement webpack 5 de clean-webpack-plugin.
• Le CSS est empaqueté, pas extrait. style-loader injecte les styles via JavaScript. Pour émettre un fichier .css distinct en production, ajoutez MiniCssExtractPlugin vous-même.
• Serveur de développement de base. Une fois activé, devServer définit static, port: 3000 et hot: true. Ajoutez à la main des options comme historyApiFallback ou proxy si votre application en a besoin.

Pour aller plus loin

Le fichier généré est un point de départ, pas une configuration de production complète. Étapes suivantes courantes que vous ajoutez à la main : MiniCssExtractPlugin pour extraire le CSS, sass-loader pour .scss, les modules asset de webpack 5 pour les images et les polices, une valeur devtool pour les source maps et un bloc splitChunks pour le découpage du code.