Premiers pas avec Webpack [avec l'exemple de projet]

Webpack est un bundler de modules cela facilite la construction d'applications JavaScript complexes. Il a acquis une forte emprise depuis que la communauté React l’a choisi comme principal outil de construction. Webpack est ni un gestionnaire de paquets ni un coureur de tâches utilise une approche différente (plus avancée), mais son objectif est également de mettre en place un processus de construction dynamique.

Webpack fonctionne avec JavaScript vanille. Vous pouvez l'utiliser pour regrouper les actifs statiques d'une application, tels que les images, les polices, les feuilles de style, les scripts dans un seul fichier tout en prendre soin de toutes les dépendances.

Vous n'aurez pas besoin de Webpack pour créer une application ou un site Web simple, par exemple une application ne contenant qu'un seul fichier JavaScript, un fichier CSS et quelques images. Toutefois, cela peut vous sauver la vie. application plus complexe avec plusieurs actifs et dépendances.

Webpack vs coureurs de tâches vs Browserify

Alors, comment Webpack empile-t-il par rapport à d'autres outils de construction tels que Grunt, Gulp ou Browserify?

Grunt et Gulp sont des coureurs de tâches. Dans leur fichier de configuration, vous spécifier les tâches, et le coureur de tâches les exécute. le flux de travail d'un coureur de tâches ressemble fondamentalement à ceci:

Cependant, Webpack est un bundler de modules qui analyse l'ensemble du projet, met en place un arbre de dépendance, et crée un fichier JavaScript fourni qu'il sert au navigateur.

Browserify est plus proche de Webpack que des coureurs de tâches, car il crée un graphe de dépendance mais il ne le fait que pour les modules JavaScript. Webpack va encore plus loin et ne regroupe pas seulement le code source, mais aussi d'autres atouts comme des images, des feuilles de style, des polices de caractères, etc..

Si vous voulez en savoir plus sur comment Webpack se compare-t-il aux autres outils de construction, Je vous recommande deux articles:

Andrew Ray's Webpack: quand utiliser et pourquoi sur son propre blog
Cory House's Browserify vs Webpack sur freeCodeCamp (avec de superbes illustrations)

Les deux illustrations ci-dessus proviennent de la Matériel Webpack du manuel de Pro React, une autre ressource qui vaut le coup d'oeil.

Quatre concepts de base de Webpack

Webpack a quatre principales options de configuration appelées “concepts de base” que vous devrez définir dans le processus de développement:

Entrée - la point de départ du graphe de dépendance (un ou plusieurs fichiers JavaScript).
Sortie - le fichier où vous voulez le la sortie à regrouper (un fichier JavaScript).
Chargeurs - transformations sur les actifs qui transformez-les en modules Webpack afin qu'ils puissent être ajouté au graphe de dépendance. Par exemple, css-loader est utilisé pour l'importation de fichiers CSS.
Plugins - actions et fonctionnalités personnalisées effectué sur le paquet. Par exemple, le i18n-webpack-plugin intègre la localisation dans le paquet.

Les chargeurs fonctionnent fichier par fichier avant la compilation. Les plugins sont exécutés sur le code fourni, à la fin du processus de compilation.

Installer Webpack

À installer Webpack, ouvrez la ligne de commande, accédez au dossier de votre projet et exécutez la commande suivante:

 npm init

Si vous ne voulez pas faire la configuration vous-même, vous pouvez faire npm peupler le package.json fichier avec les valeurs par défaut avec la commande suivante:

 npm init -y

Ensuite, installez Webpack:

 npm installer le webpack --save-dev

Si vous avez utilisé les valeurs par défaut, voici comment votre package.json Le fichier devrait ressembler à maintenant (les propriétés peuvent être dans un ordre différent):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dépendances": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Erreur: aucun test spécifié \" && exit 1 "," mots clés ": []," author ":" "," license ":" ISC "

Créer le fichier de configuration

Vous devez créer un webpack.config.js fichier dans le dossier racine du projet. Ce fichier de configuration a un rôle central, car c’est là que vous allez définir les quatre concepts de base (points d'entrée, sortie, chargeurs, plugins).

le webpack.config.js fichier détient un objet de configuration dont propriétés que vous devez spécifier. Dans cet article, nous allons spécifier les quatre propriétés que correspondent aux quatre concepts de base (entrée, sortie, module, et brancher), mais l'objet config a également d'autres propriétés.

1. Créez le (s) point (s) d'entrée

Vous pouvez avoir un ou plusieurs points d'entrée. Vous devez les définir dans le entrée propriété.

Insérez l'extrait de code suivant dans le webpack.config.js fichier. Il spécifie un point d'entrée:

 module.exports = entry: "./src/script.js";

Pour spécifier plusieurs points d’entrée, vous pouvez utiliser soit le tableau ou la syntaxe de l'objet.

Dans votre dossier de projet, créer un nouveau src dossier et un script.js déposer à l'intérieur. Ce sera votre point d'accès. À des fins de test, juste placer une ficelle à l'intérieur. J'ai utilisé le suivant (mais vous pouvez aussi en utiliser un plus intéressant):

 const greeting = "Bonjour. Je suis un projet de démarrage de Webpack."; document.write (salutation);

2. Définir la sortie

Vous pouvez avoir un seul fichier de sortie. Webpack regroupe tous les actifs dans ce fichier. Vous devez configurer le sortie propriété de la manière suivante:

 const path = require ("chemin"); module.exports = entrée: "./src/script.js", sortie: nom du fichier: "bundle.js", chemin: chemin.resolve (__ nom de répertoire, 'dist');

le nom de fichier propriété définit la nom du fichier fourni, tandis que le chemin propriété spécifie le nom du répertoire. L’exemple ci-dessus créera le /dist/bundle.js fichier.

Bien que ce ne soit pas obligatoire, il vaut mieux Utilisez le path.resolve () méthode quand vous définissez le chemin la propriété, comme assure une résolution précise du module (le chemin absolu de la sortie est créé en fonction de différentes règles dans différents environnements, la résolution du module résout cet écart). Si tu utilises path.resolve, tu dois exiger la chemin Module de nœud au sommet de la webpack.config.js fichier.

3. Ajouter les chargeurs

À ajouter les chargeurs, vous devez définir le module propriété. Ci-dessous, nous ajoutons le babel-loader cela vous permet de utiliser en toute sécurité les fonctionnalités ECMAScript 6 dans vos fichiers JS:

 const path = require ("chemin"); module.exports = entrée: "./src/script.js", sortie: nom du fichier: "bundle.js", chemin: chemin.resolve (__ nom de répertoire, 'dist'), module: règles: [test : /\.js$/, exclure: / (node_modules | bower_components) /, utiliser: loader: "babel-loader", options: presets: ["env"]];

La config peut sembler difficile mais c'est juste un copier-coller de Documentation du chargeur Babel. La plupart des chargeurs sont livrés avec un fichier readme ou une sorte de documentation, vous pouvez donc (presque) toujours savoir comment les configurer correctement. Et, les documents Webpack ont également une page qui explique comment configurer module.rules.

Vous pouvez ajouter autant de chargeurs que vous avez besoin, voici la liste complète. Notez que vous devez également installer chaque chargeur avec npm pour les faire fonctionner. Pour le chargeur Babel, vous devez installer les packages de nœuds nécessaires avec npm:

 npm installer --save-dev babel-loader sac web pack babel-preset-env

Si vous regardez votre package.json fichier, vous verrez que npm ajouté trois paquets liés à Babel à la devDependencies propriété, ceux-ci se chargeront de la compilation ES6.

4. Ajouter les plugins

À ajouter les plugins, vous devez spécifier le plugins propriété. De plus, vous devez aussi exiger les plugins un par un, car ce sont des modules externes.

Dans notre exemple, nous ajoutons deux plugins Webpack: le Plugin HTML Webpack et le Précharger le plugin Webpack. Webpack a un écosystème de plugin agréable, vous pouvez parcourir la liste complète ici.

Exiger les plugins en tant que modules de nœud, créer deux nouvelles constantes: HtmlWebpackPlugin et PréchargerWebpackPlugin et Utilisez le exiger() une fonction.

 const path = require ("chemin"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = entrée: "./src/script.js", sortie: nom du fichier: "bundle.js", chemin: chemin.resolve (__ nom de répertoire, 'dist'), module: règles: [test : /\.js$/, exclure: / (node_modules | bower_components) /, utiliser: loader: "babel-loader", options: presets: ["env"]], plugins: [new HtmlWebpackPlugin (), new PreloadWebpackPlugin ()];

Tout comme dans le cas des chargeurs, vous devez également installer les plugins Webpack avec npm. Pour installer les deux plugins dans l'exemple, exécutez les deux commandes suivantes dans votre ligne de commande:

 npm installer plugin html-webpack --save-dev npm installer --save-dev preload-webpack-plugin

Si vous vérifiez votre package.json déposer maintenant, vous verrez que npm ajouté les deux plugins au devDependencies propriété.

Exécuter Webpack

À créer l'arbre de dépendance et sortir le paquet, exécutez la commande suivante dans la ligne de commande:

 Webpack

Il habituellement prend une ou deux minutes pour que Webpack construise le projet. Lorsque vous avez terminé, vous verrez un message similaire dans votre CLI:

Si tout allait bien Webpack A créé un dist dossier à la racine de votre projet et placé les deux fichiers groupés (bundle.js et index.html) à l'intérieur.

Repo Github

Si vous souhaitez consulter, télécharger ou bifurquer l'intégralité du projet, consultez notre rapport Github..