hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Premiers pas avec Webpack [avec un exemple de projet]

Webpack est un bundler de module qui facilite la construction d'applications JavaScript complexes. Il a gagné en popularité depuis que la communauté React l'a choisi comme principal outil de construction. Webpack n'est ni gestionnaire de paquets, ni gestionnaire de tâches car il 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 de vanilla. Vous pouvez l'utiliser pour regrouper les ressources statiques d'une application, telles que les images, les polices, les feuilles de style et les scripts, dans un seul fichier tout en prenant 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 un seul JavaScript et un seul fichier CSS et quelques images, mais cela peut sauver des vies pour une application plus complexe avec plusieurs ressources et dépendances .

Webpack vs. runners de tâche vs. Browserify

Alors, comment Webpack s'empile-t-il par rapport aux 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écifiez les tâches et le programme d'exécution de tâche les exécute. Le flux de travail d'un task runner ressemble à ceci:

Toutefois, Webpack est un regroupeur de modules qui analyse l'ensemble du projet, définit un arbre de dépendances et crée un fichier JavaScript groupé qu'il sert au navigateur.

Browserify est plus proche de Webpack que des coureurs de tâches, car il crée également un graphe de dépendances, mais uniquement pour les modules JavaScript . Webpack va encore plus loin, et il ne combine pas seulement le code source mais aussi d'autres ressources telles que les images, les feuilles de style, les polices, etc.

Si vous voulez en savoir plus sur la façon dont Webpack se compare à d'autres outils de construction, je vous recommande deux articles:

  1. Webpack d' Andrew Ray : Quand utiliser et pourquoi sur son propre blog
  2. Browserify vs Webpack de Cory House sur freeCodeCamp (avec des illustrations impressionnantes)

Les deux illustrations ci-dessus sont tirées du matériel Webpack du manuel Pro React, une autre ressource qui vaut le coup d'œil.

Quatre concepts de base de Webpack

Webpack dispose de quatre options de configuration principales appelées «concepts de base» que vous devrez définir dans le processus de développement:

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

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

Installez Webpack

Pour 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 vous-même la configuration, vous pouvez faire en sorte que npm package.json fichier package.json avec les valeurs par défaut avec la commande suivante:

 npm init -y 

Ensuite, installez Webpack:

 npm installer webpack --save-dev 

Si vous avez utilisé les valeurs par défaut, package.json comment devrait ressembler votre fichier package.json 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 " ": [], " auteur ":" ", " licence ":" ISC "} 

Créez le fichier de configuration

Vous devez créer un fichier webpack.config.js 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, loaders, plugins).

Le fichier webpack.config.js contient un objet de configuration dont vous devez spécifier les propriétés. Dans cet article, nous allons spécifier les quatre propriétés qui correspondent aux quatre concepts de base ( entry, output, module et plugin ), mais l'objet config a également d'autres propriétés.

1. Créez le ou les points d'entrée

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

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

 module.exports = {entrée: "./src/script.js"}; 

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

Dans votre dossier de projet, créez un nouveau dossier src et un fichier script.js à l'intérieur . Ce sera votre point d'entrée . À des fins de test, placez simplement une chaîne à l' intérieur. J'ai utilisé le suivant (cependant, vous pouvez aussi en utiliser un plus intéressant):

 const greeting = "Salut, je suis un projet de démarrage de Webpack."; document.write (message d'accueil); 

2. Définir la sortie

Vous ne pouvez avoir qu'un seul fichier de sortie . Webpack regroupe tous les éléments dans ce fichier. Vous devez configurer la propriété de output de la manière suivante:

 const path = require ("chemin"); module.exports = {entry: "./src/script.js", sortie: {nom de fichier: "bundle.js", chemin: path.resolve (__ dirname, 'dist')}}; 

La propriété filename définit le nom du fichier fourni, tandis que la propriété path spécifie le nom du répertoire . L'exemple ci-dessus va créer le fichier /dist/bundle.js .

Bien que cela ne soit pas obligatoire, il est préférable d' utiliser la méthode path.resolve() lorsque vous définissez la propriété path, car elle garantit une résolution précise du module (le chemin absolu de la sortie est créé selon différentes règles dans différents environnements, résolution du module contradiction). Si vous utilisez path.resolve, vous devez utiliser le module Node du path en haut du fichier webpack.config.js .

3. Ajouter les chargeurs

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

 const path = require ("chemin"); module.exports = {entry: "./src/script.js", sortie: {nom de fichier: "bundle.js", chemin: path.resolve (__ dirname, 'dist')}, module: {rules: [{test : /\.js$/, exclure: / (node_modules | bower_components) /, utilisez: {loader: "babel-loader", options: {préréglages: ["env"]}}}]}}; 

La config peut sembler difficile mais c'est juste copié-collé de la documentation de chargeur de Babel . La plupart des chargeurs viennent 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 nécessaire, 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 paquets Node nécessaires avec npm:

 npm installer --save-dev babel-loader babel-core babel-preset-env webpack 

Si vous jetez un oeil à votre fichier package.json, vous verrez que npm a ajouté trois paquets liés à Babel à la propriété devDependencies, qui s'occuperont de la compilation ES6.

4. Ajoutez les plugins

Pour ajouter les plugins, vous devez spécifier la propriété plugins . De plus, vous devez également demander 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 plugin Preload Webpack . Webpack a un bel écosystème de plugin, vous pouvez parcourir la liste complète ici.

Pour requérir les plugins en tant que modules Node, créez deux nouvelles constantes : HtmlWebpackPlugin et PreloadWebpackPlugin et utilisez la fonction require() .

 const path = require ("chemin"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = {entry: "./src/script.js", sortie: {nom de fichier: "bundle.js", chemin: path.resolve (__ dirname, 'dist')}, module: {rules: [{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 html-webpack-plugin --save-dev npm installer --save-dev preload-webpack-plugin 

Si vous vérifiez votre fichier package.json maintenant, vous verrez que npm a ajouté les deux plugins à la propriété devDependencies .

Exécuter Webpack

Pour créer l'arborescence des dépendances et générer le bundle, exécutez la commande suivante dans la ligne de commande:

 webpack 

Il faut généralement une ou deux minutes à Webpack pour construire le projet. Lorsque vous avez terminé, vous verrez un message similaire dans votre CLI:

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

Github repo

Si vous voulez vérifier, télécharger, ou bifurquer l'ensemble du projet, jetez un oeil à notre repo Github.

14 thèmes WordPress multi-usages à vérifier

14 thèmes WordPress multi-usages à vérifier

Nous considérons que les thèmes WordPress polyvalents présentés ici sont parmi les meilleurs sur le marché aujourd'hui. Beaucoup d'entre eux sont assez bien établis, tandis que quelques-uns viennent seulement sur le marché récemment, mais ces nouveaux venus ont déjà gagné une réputation pour la flexibilité, la facilité d'utilisation, la qualité globale et l'excellent support à la clientèle.Bien que pratiqu

(Conseils techniques et de conception)

Comment réduire les taux d'abandon des paniers sur votre site e-Commerce

Comment réduire les taux d'abandon des paniers sur votre site e-Commerce

L'abandon de panier est un problème standard que chaque site de commerce électronique rencontre tôt ou tard. Selon le Baymard Research Institute, le taux d'abandon moyen des paniers d' achat s'élève à 68, 63%, une valeur calculée sur la base de 33 études différentes.Prêter attention à la caisse UX, et la conception pour les besoins spécifiques de votre public cible peut diminuer le nombre de clients qui abandonnent leurs achats au dernier moment crucial, au milieu du processus de commande.Dans cet ar

(Conseils techniques et de conception)