Share
C'est une pratique assez courante de nos jours, lors de la création d'un site Web, de mettre en place un processus de création pour vous aider à exécuter les tâches de développement et à préparer vos fichiers pour un environnement réel..
Vous pouvez utiliser Grunt ou Gulp pour cela, en construisant une chaîne de transformations qui vous permet de jeter votre code par un bout et d'obtenir du CSS et du JavaScript minifiés par l'autre.
Ces outils sont extrêmement populaires et très utiles. Il existe cependant une autre façon de faire, utiliser Webpack..
Webpack est ce qu'on appelle un "module bundler". Il faut des modules JavaScript, comprend leurs dépendances, puis les concatène de la manière la plus efficace possible, en créant un fichier JS unique à la fin. Rien de spécial, non? Des choses comme RequireJS le font depuis des années.
Eh bien, voici la torsion. Avec Webpack, les modules ne sont pas limités aux fichiers JavaScript. En utilisant Loaders, Webpack comprend qu'un module JavaScript peut nécessiter un fichier CSS et qu'un fichier CSS peut nécessiter une image. Les actifs sortis ne contiendront que ce qui est nécessaire avec un minimum de tracas. Mettons-nous en place pour que nous puissions voir cela en action.
Comme avec la plupart des outils de développement, vous devez installer Node.js avant de pouvoir continuer. En supposant que cela soit correctement configuré, tout ce que vous avez à faire pour installer Webpack est simplement de taper ce qui suit sur la ligne de commande.
npm installer webpack -g
Cela installera Webpack et vous permettra de l’exécuter à partir de n’importe où sur votre système. Ensuite, créez un nouveau répertoire et créez à l'intérieur un fichier HTML de base comme ceci:
Webpack amusant
La partie importante ici est la référence à bundle.js, ce que Webpack va faire pour nous. Notez également l'élément H2, nous l'utiliserons plus tard.
Ensuite, créez deux fichiers dans le même répertoire que votre fichier HTML. Nommez le premier main.js, qui, comme vous pouvez l’imaginer, est le principal point d’entrée de notre script. Puis nomme le second say-hello.js. Cela va être un module simple qui prend le nom d'une personne et un élément DOM, et insère un message de bienvenue dans ledit élément.
// say-hello.js module.exports = fonction (nom, élément) element.textContent = 'Bonjour' + nom + '!'; ;
Maintenant que nous avons un module simple, nous pouvons en avoir besoin et l’appeler de main.js. C'est aussi simple que de faire:
Accentsconagua
var sayHello = require ('./ dire-bonjour'); sayHello ('Guybrush', document.querySelector ('h2'));Maintenant, si nous ouvrions notre fichier HTML, alors ce message ne serait évidemment pas affiché car nous n’avons pas été inclus. main.js ni compilé les dépendances pour le navigateur. Ce que nous devons faire, c’est que Webpack se penche sur main.js et voir s'il y a des dépendances. Si c'est le cas, il devrait les compiler ensemble et créer un fichier bundle.js que nous pourrons utiliser dans le navigateur..
Retournez au terminal pour exécuter Webpack. Tapez simplement:
webpack main.js bundle.js
Le premier fichier spécifié est le fichier d'entrée dans lequel Webpack doit commencer à rechercher des dépendances. Il déterminera si des fichiers requis nécessitent d'autres fichiers et le poursuivra jusqu'à ce qu'il ait résolu toutes les dépendances nécessaires. Une fois cela fait, il génère les dépendances sous forme de fichier concaténé unique dans bundle.js. Si vous appuyez sur retour, vous devriez voir quelque chose comme ceci:
Hash: 3d7d7339a68244b03c68 Version: webpack 1.12.12 Durée: 55ms Taille de la ressource, morceaux de noms de morceaux bundle.js 1.65 kB 0 [émis] [0] ./main.js 90 octets 0 [construit] [1] ./say- hello.js 94 octets 0 [construit]
Ouvert index.html dans votre navigateur pour voir votre page dire bonjour.
Il n’est pas très amusant de spécifier nos fichiers d’entrée et de sortie chaque fois que nous exécutons Webpack. Heureusement, Webpack nous permet d'utiliser un fichier de configuration pour nous épargner le problème. Créez un fichier appelé webpack.config.js à la racine de votre projet avec le contenu suivant:
module.exports = entrée: './main.js', sortie: nom du fichier: 'bundle.js';
Maintenant, nous pouvons simplement taper Webpack et rien d'autre pour atteindre les mêmes résultats.
Qu'est-ce que c'est? Vous ne pouvez même pas être dérangé pour taper Webpack chaque fois que vous modifiez un fichier? Je ne sais pas, la génération d'aujourd'hui, etc. Ok, mettons en place un petit serveur de développement pour rendre les choses encore plus efficaces. Au terminal, écrivez:
npm installer webpack-dev-server -g
Puis lancez la commande webpack-dev-server. Cela démarrera un serveur Web simple en cours d’exécution, en utilisant le répertoire en cours comme emplacement pour servir les fichiers. Ouvrez une nouvelle fenêtre de navigateur et visitez le site http: // localhost: 8080 / webpack-dev-server /. Si tout va bien, vous verrez quelque chose dans le sens de ceci:
Maintenant, non seulement nous avons un joli petit serveur Web ici, mais nous en avons un qui surveille les modifications apportées à notre code. S'il voit que nous avons modifié un fichier, il exécutera automatiquement la commande webpack pour regrouper notre code et actualiser la page sans que nous fassions la moindre chose. Tous avec zéro configuration.
Essayez-le, changez le nom passé à la dis bonjour fonction, et revenez au navigateur pour voir votre changement appliqué instantanément.
Loaders est l’une des fonctionnalités les plus importantes de Webpack. Les chargeurs sont analogues aux "tâches" de Grunt et Gulp. Ils prennent essentiellement des fichiers et les transforment d'une manière ou d'une autre avant qu'ils ne soient inclus dans notre code fourni..
Supposons que nous voulions utiliser certaines des subtilités de ES2015 dans notre code. ES2015 est une nouvelle version de JavaScript qui n'est pas prise en charge par tous les navigateurs. Nous devons donc utiliser un chargeur pour transformer notre code ES2015 en un code ancien et pur ES5 qui est prise en charge. Pour ce faire, nous utilisons le populaire Babel Loader qui, selon les instructions, est installé comme suit:
npm installer babel-loader babel-core babel-preset-es2015 --save-dev
Cela installe non seulement le chargeur lui-même, mais également ses dépendances et un préréglage ES2015, car Babel doit savoir quel type de JavaScript il convertit..
Maintenant que le chargeur est installé, il suffit de dire à Babel de l'utiliser. Mettre à jour webpack.config.js donc ça ressemble à ça:
module.exports = entrée: './main.js', sortie: nom du fichier: 'bundle.js', module: chargeurs: [test: /\.js$/, exclure: / node_modules /, loader : 'babel', requête: presets: ['es2015']],;
Il y a quelques points importants à noter ici. Le premier est la ligne test: /\.js$/, qui est une expression régulière nous disant d'appliquer ce chargeur à tous les fichiers avec un .js extension. De même exclure: / node_modules / dit à Webpack d'ignorer la node_modules annuaire. chargeur et question utilisez le chargeur Babel avec le préréglage ES2015.
Redémarrez votre serveur Web en appuyant sur ctrl + c et courir webpack-dev-server encore. Tout ce que nous avons à faire maintenant, c’est d’utiliser du code ES6 pour tester la transformation. Que diriez-vous de changer notre dis bonjour variable pour être une constante?
const sayHello = require ('./ dire bonjour')Après l'enregistrement, Webpack doit avoir automatiquement recompilé votre code et actualisé votre navigateur. J'espère que vous ne verrez aucun changement. Jetez un coup d'oeil bundle.js et voyez si vous pouvez trouver le const mot-clé. Si Webpack et Babel ont fait leur travail, vous ne le verrez nulle part, mais du vieux JavaScript.
Dans la deuxième partie de ce didacticiel, nous allons utiliser Webpack pour ajouter du CSS et des images à votre page, ainsi que pour préparer votre site au déploiement..
