Comment utiliser jQuery avec WebPack

Webpack est un bundle de modules JavaScript open source. Vous pouvez trouver plus de détails sur le site officiel de WebPack.

Aujourd’hui je vais vous montrer comment intégrer Jquery à WebPack. Vous allez me dire c’est pas très compliqué, pourquoi faire un article à ce sujet ? En efffet, utiliser jQuery avec WebPack n’est pas une tâche fastidieuse. Si j’en parle c’est surtout pour vous montrer comment corriger cette erreur récurrente que rencontre pas mal de monde :

Module not found: Error: Can’t resolve ‘jquery’

Le problème

Dans son fonctionnement WebPack va chercher par défaut les fichiers dans « node_modules’, précisément le dossier « dist » du module (jquery). Une fois jQuery installé, aller dans le dossier « node_modules > jquery » et vérifier la présence ou non du dossier « dist ». Si ce dossier n’existe pas, WebPack ne va pas pouvoir importer jQuery,

Solution

Installer la bonne version de JQuery

Il semble que le dossier « dist » n’existe que depuis la version « 2.1.0-beta2 » de jQuery. Il faut donc utiliser une version supérieure à la « 2.1.0-beta2 ». De cette façon, WebPack va pouvoir importer jQuery.

//webpack.config.js
plugins: 
    [
        new webpack.ProvidePlugin(
        {
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]