Chargeurs

Les chargeurs Webpack peuvent être configurés en tant que “preLoaders”, “loaders” et “postLoaders”. Bien qu’elles ne soient pas obligées de l’être, les configurations qui utilisent le linting ou d’autres opérations impératives ou en série peuvent tirer parti de ces étapes de génération dans le pipeline.

La clé pour comprendre les chargeurs et leur utilisation est que Webpack exécutera chaque module du graphique requis via le système de chargeur. En suivant l’exemple ci-dessus, cela signifie que lorsque Webpack commence à parcourir les importations de votre application, il identifiera les fichiers requis et, à l’aide d’une simple expression régulière, déterminera quel fichier ou type de fichier nécessite quel chargeur ou série de chargeurs.

Ci-dessus, vous pouvez voir que tous les fichiers “.js” ou “.jsx” seront es-lintés par le [eslint-loader][1] dans la phase preLoader. D’autres types de fichiers js|x seront également exécutés via le [babel-loader][2] dans la phase de chargement principale. De plus, dans la même phase, tous les fichiers .scss seront chargés dans le [sass-loader][3]. Cela vous permet d’importer des fichiers Sass dans vos modules JS et de les faire sortir dans le bundle JS résultant ou même dans un autre bundle CSS autonome séparé (à l’aide d’un [plugin][4]).

Noter: L’importation de fichiers .scss ne fonctionnera qu’avec Webpack et un chargeur approprié. Node ne comprendra pas ce type d’importation sans pré-processeur ou transpileur.

A noter également dans l’exemple .scss la possibilité de “chaîner” les chargeurs en utilisant le point d’exclamation ! comme “tuyau” entre différents chargeurs. L’exemple ci-dessus dirige la sortie du “sass-loader” vers le “css-loader” et enfin vers le “style-loader”. Cela pourrait également être effectué avec un tableau de loaders : ['style-loader', 'css -loader', 'sass-loader']. Différentes options sont également disponibles pour les définitions de chargeur en ligne et suivent la syntaxe de requête [paramètre] [5] couramment trouvée dans les URL.

Voir également: https://webpack.github.io/docs/loaders.html

[1] : https://github.com/MoOx/eslint-loader [2] : https://github.com/babel/babel-loader [3] : https://github.com/jtangelder/sass-loader [4] : https://github.com/webpack/extract-text-webpack-plugin [5] : http://webpack.github.io/docs/loaders.html#parameters

Config utilisant preLoader pour eslint, babel pour jsx et css loader chaînage. #

La configuration suivante peut être utilisée comme configuration de base pour regrouper votre projet en tant que bibliothèque. Remarquez comment la configuration du module contient une liste de préchargeurs et de chargeurs.

// webpack.config.js

var path = require('path');

module.exports = {
    entry: path.join(__dirname, '..', 'src/index.js'),
    output: {
        path: path.join(__dirname, '..', '/lib'),
        filename: outputFile,
        library: 'myCoolBundle.js',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        preLoaders: [
            {
                test: /(\.jsx|\.js)$/,
                loader: "eslint-loader",
                exclude: /node_modules/,
            }
        ],
        loaders: [
            {
                test: /(\.jsx|\.js)$/,
                loader: ['babel'],
                exclude: /(node_modules)/,
                include: path.join(__dirname, '..'),
                query: {
                    presets: [ 'es2015', 'react']
                }
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader!sass-loader"]
            }
        ]
    },
    resolve: {
        root: path.resolve(__dirname, '..', './src'),
        extensions: ['', '.js', '.jsx', '.scss'],
        fallback: path.join(__dirname, '../node_modules')
    },
    eslint: {
        configFile: path.resolve(__dirname, '..', '.eslintrc'),
    }
};