Loaders dans Webpack

Pour étendre les capacités de Webpack, on utilise également des loaders. Ils permettent de prendre des fichiers d'un type spécifique et d'effectuer sur eux des opérations spécifiques.

Par exemple, on peut prendre tous les fichiers avec l'extension .less, transformer leur texte en CSS, puis minimiser le CSS obtenu et le sauvegarder dans un fichier commun.

Regardons le schéma général de travail avec un loader sur l'exemple de deux loaders imaginaires.

Installons le premier loader :

terminalnpm install test-loader1 --save-dev

Installons le deuxième loader :

terminalnpm install test-loader2 --save-dev

Après l'installation des loaders, nous pouvons les utiliser dans le fichier de configuration (inutile de les importer). Voir la syntaxe :

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // type de fichier
        use: ['test-loader1', 'test-loader2'], // loaders
      },
    ],
  },
};

On peut écrire les éléments du tableau non pas sur une ligne, mais en colonne :

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
    ],
  },
};

Pour différents types de fichiers, on peut écrire différentes règles :

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.sass$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'test-loader3',
          'test-loader4'
        ],
      },
    ],
  },
};