Chargeurs et plugins

Les chargeurs et les plugins constituent les éléments constitutifs de Webpack.

Les chargeurs sont généralement délégués à une seule tâche et à un seul type de fichier. Ils sont plus faciles à configurer et nécessitent généralement moins de code passe-partout.

Les plugins, en revanche, ont accès au système de build interne de Webpack via des hooks, et sont donc plus puissants. Les plugins peuvent modifier l’environnement Webpack entièrement configuré et ils peuvent effectuer des actions personnalisées tout au long du processus de compilation.

Lorsqu’il s’agit de nos fichiers CSS, par exemple, un chargeur peut être utilisé pour ajouter automatiquement des préfixes de fournisseur aux propriétés, tandis qu’un plugin peut être utilisé pour produire une feuille de style minifiée dans le processus de construction du bundler.

Premiers pas avec les chargeurs #

Pour commencer, “npm install” les chargeurs souhaités pour votre projet.

À l’intérieur de l’objet de configuration qui est exporté dans webpack.config.js, une propriété module contiendra tous vos chargeurs.

const source = `${__dirname}/client/src/`;

module.exports = {
  // other settings here
  
  module: {
    loaders: [
          {
            test: /\.jsx?$/,
            include: source,
            loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
          },
          {
            test: /\.s?css$/,
            include: source,
            loaders: ['style', 'css', 'autoprefixer', 'sass']
          }
        ]
  },
};

Dans la configuration ci-dessus, nous utilisons trois paramètres de base pour nos chargeurs :

• test : C’est ici que nous lions les chargeurs à des extensions spécifiques à l’aide de RegExp. Le premier ensemble de chargeurs est exécuté sur tous les fichiers .js et .jsx. Le deuxième ensemble est exécuté sur tous les fichiers .css et .scss.
• include : C’est le répertoire dans lequel nous voulons que nos chargeurs s’exécutent. Facultativement, nous pourrions tout aussi facilement utiliser la propriété exclude pour définir les répertoires que nous ne voulons pas inclure.
• loaders : Voici une liste de tous les chargeurs que nous voulons exécuter sur les fichiers spécifiés dans test et include.

Il est important de noter que les chargeurs sont exécutés de droite à gauche dans chaque tableau de chargeurs et de bas en haut dans les définitions individuelles. Le code ci-dessous exécutera les chargeurs dans l’ordre suivant : sass, autoprefixer, css, style.

loaders: [
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['style', 'css', 'autoprefixer']
  },
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['sass']
  }
]

Il s’agit d’une source courante de confusion et de bogues pour les développeurs qui découvrent Webpack. Par exemple, lors de l’utilisation de la syntaxe JSX et ES6, nous voulons pelucher ce code, pas pelucher le code compilé fourni par notre chargeur babel. Par conséquent, notre chargeur eslint est placé à droite de notre chargeur babel.

Le suffixe -loader est facultatif lors de la liste de nos chargeurs.

loaders: ['sass']

… est équivalent à:

loaders: ['sass-loader']

Alternativement, vous pouvez utiliser la propriété loader (au singulier) avec une chaîne séparant la liste des chargeurs par le caractère !.

loaders: ['style', 'css']

… est équivalent à:

loader: "style!css"

chargement des fichiers dactylographiés #

Pour utiliser Typescript avec Webpack, vous devez installer typescript et ts-loader

npm --save-dev install typescript ts-loader

Vous pouvez maintenant configurer Webpack pour utiliser des fichiers dactylographiés

// webpack.config.js

module.exports = {
  ..
  resolve: {
    // .js is required for react imports.
    // .tsx is required for react tsx files.
    // .ts is optional, in case you will be importing any regular ts files.
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
        test: /\.tsx?$/,
        loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  ...
};