Laravel Mix - un wrapper simple et puissant autour de Webpack

Laravel Mix

Nous allons parler de Laravel Mix. Pour mieux le comprendre, nous allons commencer par expliquer ce qu'est Webpack.

Webpack est un bundler de modules incroyablement puissant qui prépare votre JavaScript et vos actifs pour le navigateur. Mix est donc une fine couche au-dessus de webpack qui sert à construire dynamiquement votre configuration Webpack. Bien que Laravel Mix ait été conçu à l'origine pour les projets Laravel, il peut bien sûr être utilisé pour n'importe quel type d'application.

Vue d'ensemble

La dernière version de Laravel Mix est la version 6 et nécessite des dépendances compatibles avec Webpack 5 ou PostCSS 8. C'est un outil gratuit qui optimise et minifie automatiquement vos assets lors de la construction pour la production avec la commande npx mix --production, dont nous parlerons plus tard.

Laravel Mix est également livré avec un support basique des typescript et View, et pour aider à la mise en cache à long terme, mix fournit la méthode mix.version(). Avec la version activée, un ID de chaîne de requête unique sera ajouté à vos actifs chaque fois que votre code est compilé, et lors de la compilation, nous verrons les noms hachés dans le fichier mix-manifest.json. Un autre grand avantage de l'API mix est que nous pouvons isoler ou extraire les bibliothèques des fournisseurs dans leurs propres fichiers, ce qui se traduira bien sûr par un fichier app.js beaucoup plus petit. Avec le remplacement de modules à chaud, nous pouvons échanger, ajouter ou supprimer des modules pendant l'exécution d'une application sans avoir à la recharger complètement, et tout ce que nous devons faire est d'exécuter à partir de la ligne de commande npx mix watch --hot pour démarrer un serveur node et surveiller notre bundle pour les changements.

Mix fournit la commande mix.css() pour la compilation CSS de base et l'écosystème du plugin iPostCSS dans le cadre de notre compilation, et nous avons également des options pour la compilation Sass et Less. Par défaut, Mix achemine toutes nos feuilles de style CSS à travers le populaire plugin Autoprefixer PostCSS. Ainsi, nous sommes libres d'utiliser la dernière syntaxe CSS 3 en sachant que tous les préfixes nécessaires aux navigateurs seront appliqués automatiquement. Un concept clé à comprendre est que Mix et Webpack réécriront toutes les URLs avec des chemins relatifs dans nos feuilles de style, mais les chemins absolus seront toujours exclus de la réécriture d'URL.

Étapes de l'installation

Nous verrons ici comment installer et configurer Laravel Mix.

Tout d'abord, nous devons installer Mix via npm ou yarn.

npm install laravel-mix --save-dev

yarn add laravel-mix

La deuxième étape consiste à créer un fichier de configuration de mixage nommé webpack.mix.js

touch webpack.mix.js

Nous y définissons ensuite notre compilation. Dans cet exemple, nous définissons notre chemin public et utilisons la compilation mix sass.

const mix = require('laravel-mix');
mix.setPublicPath(`dist`);
mix.sass('resources/scss/app.scss', `dist/css`);
mix.js('resources/js/app.js', 'dist/js')

Enfin, il ne nous reste plus qu'à lancer une commande npx mix pour déclencher le build Webpack approprié.

Commandes CLI utiles

• Compilation dans un environnement local

  npm mix

• Surveiller les actifs pour détecter les changements

  montre npx mix

• Sondage

  npx mix watch--watch-options-poll

• Remplacement du module chaud

  npx mix watch --hot

• Compilation pour la production

  npx mix --production

• Personnaliser le chemin de configuration du mixage

  npx mix --mix-config=build/webpack.mix.js -production

Caractéristiques utiles

• Mix fournit d'autres fonctionnalités utiles, par exemple si nous avons des bibliothèques de fournisseurs qui doivent rester séparées de notre bundle webpack principal, nous pouvons utiliser mix.combine() pour fusionner ou concaténer plusieurs fichiers en un seul fichier appelé par exemple merged.js.
• Une autre fonctionnalité intéressante est browsersync, qui surveille automatiquement les modifications apportées à nos fichiers et les injecte dans le navigateur, sans qu'une actualisation manuelle ne soit nécessaire.
• Dans certains cas, il peut s'avérer plus facile de descendre d'un niveau et de surcharger directement la configuration webpack sous-jacente et mix fournit la commande mix.webpackConfig() pour nous permettre de le faire.
• Examinons maintenant les crochets d'événements. Dans certains scénarios, nous pouvons avoir besoin d'exécuter un élément de logique avant que la compilation ne commence. Par exemple, si nous avons besoin de copier un répertoire ou de déplacer un fichier, la fonction mix.before() le permet, et Mix ne commencera pas sa compilation tant que tous les hooks n'auront pas été entièrement résolus. D'autre part, nous pouvons exécuter un morceau de logique après que Webpack a terminé sa compilation avec la méthode mix.after(). Par exemple, si vous souhaitez enregistrer une liste de tous les actifs compilés.

Pour plus d'informations, vous pouvez consulter la documentation officielle de Laravel Mix.