Le traitement des images avec webpack

Webpack sert surtout à utiliser les import/exports pour les fichiers JavaScript mais webpack peut aussi faire d'autres choses. Webpack peut être utilisé pour traiter les images, le code html et css comme des modules c’est-à-dire du code JavaScript.

Nous allons voir comment fonctionne webpack pour des import d’images. Le principe : vous ne faites pas directement appel à votre image mais à un import de votre image. Tout ceci ne fonctionne que dans un fichier JavaScript, cela ne fonctionne pas avec la balise img dans votre page html.

Exemple pratique d'utilisation de webpack avec les images

Il faut déjà avoir installé webpack pour réaliser le tutorial ci-dessous.

Installation du file loader.

npm install file-loader --save-dev

Modifions le fichier webpack.config.js pour appeler le file loader

const path = require('path');

module.exports = {

            entry: './src/js2.js',
            output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'app.bundle.js'
            },
            module: {

            loaders: [
            { test: /\.(png|jpg|jpeg|gif|svg)$/,
            loader: 'file-loader' }
            ]

            }
    };

On ajoute un loader pour les fichiers. Le test doit être lu comme un if. Si les fichiers se termine par les extensions png, jpeg… alors lancer le file loader.

Ajoutons une image dans le répertoire src. Dans mon exemple j'ajoute « architecture1.jpg ».

Modification du fichier index.html.

<html>
            <head>

            </head>

            <body>
                <h1>Test Webpack</h1>
                <div id="image"></div>
                <script src="./dist/app.bundle.js"></script>

            </body>

</html>

On ajoute un div pour recevoir l'image.

Modification du fichier js2.js

import {display} from './js1.js';
import image from "./Architecture1.jpg";

document.getElementById("image").innerHTML = '<img src="dist/' + image + '" alt="photo">';

On importe l'image puis on l’affiche.

Dans la console :

.\node_modules\.bin\webpack

Après la commande on s’aperçoit que le fichier image « architecture1.jpg » est copié dans le répertoire dist avec un nom unique (rto3242fgdg43.jpg par exemple). C'est ce fichier qui va être importé par le fichier js2.js. Si vous travaillez avec un site web classique (bootstrap, php…) cette technique n’a pas trop d’intérêt par contre si vous travaillez avec une logique de composants où le site est entièrement construit avec JavaScript cela peut devenir très intéressant.

En poussant le concept un peu plus loin on peut utiliser l’url-loader qui encode les images en base64 si elles ne sont pas très grosses. Vous n’avez plus à télécharger l'image sur le réseau elle est directement incluse dans la page HTML ce qui est plus rapide.

CSS avec webpack

On peut aussi traiter CSS comme un module avec webpack. On récupére le CSS dans JavaScript sous forme de chaîne.

On ne va plus incorporer un fichier CSS dans la page html mais un fichier JavaScript (app.bundle.js) contenant le CSS sous forme de chaîne.

npm install css-loader –-save-dev

Le css loader transforme votre fichier css en chaîne Javascript dans un module. Il faut télécharger une autre librairie pour importer votre CSS JavaScript dans une balise de style.

npm install style-loader –-save-dev

Modification du fichier config.webpack.js

 
const path = require('path');

module.exports = {

    entry: './src/js2.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
    },
    module: {

    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader"

        },
        { test: /\.(png|jpg|jpeg|gif|svg)$/,
        loader: 'file-loader' }
        ]
    }
};

On va lancer les librairies sur les fichiers .css, on va commencer par css-loader qui va transformer votre CSS en module JavaScript puis style-loader qui va ajouter du code JavaScript dans app.bundle.js pour créer une balise style dans votre page html.

Ajouter le fichier page.css dans le répertoire src.

h1 {
    color: red;
}

Lancer la commande

.\node_modules\.bin\webpack

Le fichier index.html n’est pas modifié et ne contient pas encore la balise style.

Lire la page index.html dans votre navigateur. Avec les outils de développement vous pouvez que la balise style a été ajoutée automatiquement à votre page avec tout le CSS. Les règles CSS sont désormais incluses dans le fichier app.bundle.js. Elles sont ajoutées à votre page lorsque le script est lancé.

Dans app.bundle.js on trouve le CSS sous forme de chaîne.

// module exports.push([module.i, "h1\r\n{ \r\n    color: red;\r\n}\r\n\r\n", ""]);