Share
Dans le précédent tutoriel, nous avons appris à configurer un projet Webpack et à utiliser des chargeurs pour traiter notre code JavaScript. Toutefois, Webpack se démarque par sa capacité à regrouper d'autres types d'actifs statiques tels que les CSS et les images, et à les inclure dans notre projet uniquement lorsqu'ils sont requis. Commençons par ajouter quelques styles à notre page.
Commencez par créer un fichier CSS normal dans un répertoire de styles. Appelle main.css et ajouter une règle de style pour l'élément de titre.
h2 fond: bleu; Couleur jaune;
Alors, comment pouvons-nous obtenir cette feuille de style dans notre page? Comme dans la plupart des cas avec Webpack, nous aurons besoin d’un autre chargeur. Deux en fait: css-loader et style-loader. Le premier lit tous les styles de nos fichiers CSS, le second injecte ces styles dans notre page HTML. Installez-les comme suit:
npm installer style-loader css-loader
Ensuite, nous dirons à Webpack comment les utiliser. Dans webpack.config.js, nous devons ajouter un autre objet au tableau loaders. Dans ce document, nous souhaitons ajouter un test pour ne faire correspondre que les fichiers CSS, ainsi que pour spécifier les chargeurs à utiliser..
test: /\.css$/, exclure: / node_modules /, loader: 'style! css'
La partie intéressante de cet extrait de code est le 'style! css' ligne. Les chargeurs sont lus de droite à gauche, ce qui indique à Webpack de lire d’abord les styles de tous les fichiers se terminant par .css, puis injecter ces styles dans notre page.
Comme nous avons mis à jour notre fichier de configuration, nous devons redémarrer le serveur de développement pour que nos modifications soient prises en compte. Utilisation ctrl + c arrêter le serveur et webpack-dev-server pour recommencer.
Tout ce que nous avons à faire maintenant, c’est d’exiger notre feuille de style dans main.js fichier. Nous procédons de la même manière que n'importe quel autre module JavaScript:
Accentsconagua
const sayHello = require ('./ dire-bonjour'); require ('./ styles / main.css'); sayHello ('Guybrush', document.querySelector ('h2'));Notez comment nous n'avons même pas touché index.html. Ouvrez votre navigateur pour voir la page avec style h2. Changez la couleur de l'en-tête dans votre feuille de style pour le voir se mettre à jour instantanément sans actualisation. Charmant.
"Mais personne n'utilise CSS de nos jours, grand-père! Tout est question de Sass". Bien sûr que ça l'est. Heureusement, Webpack a un chargeur pour faire exactement ce que vous voulez. Installez-le avec la version de noeud de Sass en utilisant:
npm installe sass-loader node-sass
Puis mettre à jour webpack.config.js:
test: /\.scss$/, exclure: / node_modules /, loader: 'style! css! sass'
Ceci dit maintenant que pour tout fichier se terminant par .scss, convertissez le Sass en CSS simple, lisez les styles du CSS, puis insérez-les dans la page. N'oubliez pas de renommer main.css à main.scss, et nécessite le fichier nouvellement nommé à la place. D'abord quelques Sass:
$ fond: bleu; h2 background: $ background; Couleur jaune;
Puis main.js:
require ('./ styles / main.scss');Super. C'est aussi simple que ça. Pas de conversion et de sauvegarde des fichiers, ni même de regarder des dossiers. Nous avons juste besoin de nos styles Sass directement.
"Alors images, chargeurs aussi je parie?" Bien sûr! Avec les images, nous voulons utiliser le chargeur d’URL. Ce chargeur prend l'URL relative de votre image et met à jour le chemin afin qu'il soit correctement inclus dans votre groupe de fichiers. Comme d'habitude:
npm install url-loader
Maintenant, essayons quelque chose de différent dans notre webpack.config.js. Ajoutez une autre entrée au tableau loaders de la manière habituelle, mais cette fois, nous souhaitons que l'expression régulière corresponde à des images ayant différentes extensions de fichier:
test: /\.(jpg|png|gif)$/, notamment: / images /, loader: 'url'
Notez l'autre différence ici. Nous n'utilisons pas le exclure clé. Au lieu de cela, nous utilisons comprendre. Ceci est plus efficace car il indique à Webpack d'ignorer tout ce qui ne correspond pas à un dossier appelé "images"..
En général, vous utiliserez une sorte de système de templates pour créer vos vues HTML, mais nous allons le garder de base et créer une balise d'image en JavaScript à l'ancienne. Commencez par créer un élément d'image, définissez l'image requise sur l'attribut src, puis ajoutez l'élément à la page..
var imgElement = document.createElement ('img'); imgElement.src = require ('./ images / my-image.jpg'); document.body.appendChild (imgElement);Revenez sur votre navigateur pour voir votre image apparaître sous vos yeux!
Une autre tâche couramment effectuée au cours du développement est le peluchage. Linting est un moyen de détecter les erreurs potentielles dans votre code et de vérifier que vous avez suivi certaines conventions de codage. Les choses que vous voudrez peut-être rechercher sont "Ai-je utilisé une variable sans la déclarer au préalable?" ou "Ai-je oublié un point-virgule à la fin d'une ligne?" En appliquant ces règles, nous pouvons éliminer les bugs stupides dès le début.
JSHint est un outil populaire pour le peluchage. Cela examine notre code et met en évidence les erreurs potentielles que nous avons commises. JSHint peut être exécuté manuellement sur la ligne de commande, mais cela devient rapidement une corvée pendant le développement. Idéalement, nous aimerions qu'il s'exécute automatiquement chaque fois que nous sauvegardons un fichier. Notre serveur Webpack est déjà à l'affût des changements, alors oui, vous l'avez deviné: un autre chargeur.
Installez jshint-loader de la manière habituelle:
npm installer jshint-loader
Encore une fois, nous devons dire à Webpack de l’utiliser en l’ajoutant à notre webpack.config.js. Cependant, ce chargeur est légèrement différent. En réalité, il ne s'agit pas de transformer un code, mais simplement de jeter un coup d'œil. Nous ne voulons pas non plus que tous nos chargeurs de modification de code plus lourds fonctionnent et échouent simplement parce que nous avons oublié un point-virgule. C'est ici qu'interviennent les préchargeurs. Un préchargeur est tout chargeur que nous spécifions d'exécuter avant nos tâches principales. Ils sont ajoutés à notre webpack.conf.js de manière similaire aux chargeuses.
module: preLoaders: [test: /\.js$/, exclure: / node_modules /, loader: 'jshint'], chargeurs: […]
Désormais, notre processus de lintérisation s'exécute et échoue immédiatement si un problème est détecté. Avant de redémarrer notre serveur Web, nous devons dire à JSHint que nous utilisons ES6, sinon cela échouera lorsqu'il verra le message. const mot-clé que nous utilisons.
Après la clé de module dans notre configuration, ajoutez une autre entrée appelée "jshint" et une ligne pour spécifier la version de JavaScript..
module: preLoaders: […], chargeurs: […], jshint: esversion: 6
Enregistrez le fichier et redémarrez webpack-dev-server. Courir ok? Génial. Cela signifie que votre code ne contient aucune erreur. Introduisons-en un en supprimant un point-virgule de cette ligne:
var imgElement = document.createElement ('img')Encore une fois, enregistrez le fichier et regardez le terminal. Maintenant nous avons ceci:
AVERTISSEMENT dans ./main.js jshint entraîne des erreurs de point-virgule manquant. @ ligne 7, caractère 47
Merci, JSHint!
Maintenant que nous sommes heureux que notre code soit en forme et qu'il fasse tout ce que nous voulons, nous devons le préparer pour le monde réel. Une des choses les plus courantes à faire pour mettre votre code en ligne est de le réduire au minimum, de concaténer tous vos fichiers en un, puis de le compresser dans le plus petit fichier possible. Avant de continuer, jetez un coup d’œil à votre bundle.js. Il est lisible, a beaucoup d’espaces blancs et pèse 32 Ko..
"Attends! Ne me dis pas. Un autre chargeur, pas vrai?" Nan! En cette occasion rare, nous n'avons pas besoin d'un chargeur. Webpack a la minification intégrée directement. Une fois que vous êtes satisfait de votre code, exécutez simplement la commande suivante:
webpack -p
le -p drapeau indique à Webpack de préparer notre code pour la production. En générant le paquet, il optimise au maximum. Après avoir exécuté cette commande, ouvrez bundle.js et vous verrez que tout a été mis ensemble, et que même avec une si petite quantité de code, nous avons économisé 10 Ko..
J'espère que ce tutoriel en deux parties vous a donné suffisamment de confiance pour utiliser Webpack dans vos propres projets. N'oubliez pas que si vous souhaitez effectuer quelque chose dans votre processus de construction, il est fort probable que Webpack dispose d'un chargeur. Tous les chargeurs sont installés via npm, alors jetez un oeil là-bas pour voir si quelqu'un a déjà réalisé ce dont vous avez besoin.
S'amuser!
