Peux-tu me dire à quoi servent ces éléments ? Évidemment ! Alors :
- Le mode précise comment Webpack doit gérer la compilation. On peut lui indiquer soit "production", soit "development". En production, le code généré sera adapté à un site publié en ligne. Il sera optimisé et minifié. En mode development, le code ne sera pas autant optimisé et il sera alors plus simple de déboguer.
- Le point d'entrée correspond au main de npm dans le package.json. C'est le fichier qui devra être compilé par webpack et qui contient les dépendances de chaque autre fichier de l'application.
- Le point de sortie, c'est le fichier qui sera généré par webpack. On peut préciser son emplacement et son nom.
Je comprends mieux. Mais comment renseigne-t-on ces paramètres concrètement ?On utilise un objet JS, comme suit :
split_password2 : "R"
Pour le 3, voici l'indice : Stored XSS, Reflected XSS, _ _ _ XSS
https://training-dev.fr/_ _ _
Pour le 3, voici l'indice : Stored XSS, Reflected XSS, _ _ _ XSS
https://training-dev.fr/_ _ _
{"language":"text/javascript","content":"module.exports = {\n\tmode: , // Mode\n \tentry: , // Point d'entrée\n \toutput: , // Point de sortie\n}","filename":"webpack.config.js"}
Commençons donc à paramétrer webpack. Moi j'aime que mon dossier où il a les assets et le contenu accessible par les internautes soit nommé "public", pas "dist".
Mon point d'entrée quant à lui sera nommé "app.js".
Je dois donc configurer mon webpack.config.js comme suit :
{"language":"text/javascript","content":"module.exports = {\n\tmode: 'development',\n \tentry: './src/app.js',\n \toutput: {\n \t\tfilename:'bundle.js',\n \tpath: __dirname + '/public'\n \t}\n}","filename":"webpack.config.js"}
Mais attends, tu ne m'avais pas dit que output était lui même un objet !Tu as raison. Output est un objet qui prend deux entrées (parfois même +) :
filename : le nom du fichier qui sera généré
path : le dossier où il sera généré
D'accord, je comprends. Et du coup, tu as aussi modifié la structure de ton application pour correspondre à ta config ?Oui, enfin j'ai modifié ma structure et modifié ma configuration en conséquence, pas dans le sens inverse :p.
Du coup, après avoir lancé la commande npm run build, j'obtiens le résultat suivant :
Tout a fonctionné comme prévu !
Il faut savoir que tu trouveras couramment sur le web une autre façon d'écrire notre fichier de config. De la façon suivante :
{"language":"text/javascript","content":"const path = require('path')\nmodule.exports = {\n\tmode: 'development',\n \tentry: './src/app.js',\n \toutput: {\n \t\tfilename:'bundle.js',\n \tpath: path.resolve(__dirname, 'public')\n \t}\n}","filename":"webpack.config.js"}
Qu'est-ce que c'est que path ? C'est une librairie fournie avec NodeJS qui permet la manipulation des fichiers. Elle est très utilisée.
Bon, as-tu tout compris jusqu'ici ?
Tout compris ! Tu as des questions ?
Oui. À vrai dire, ce code fonctionne parfaitement bien quand on a un seul script. Mais quand on a plusieurs scripts ? Typiquement, j'ai deux pages HTML : index.html et products.html. Sur la page index.html j'utilise un script nommé index.js, et sur la page products.html, j'utilise un script nommé products.js. Chacun de ces fichiers a ses propres dépendances. Ça m'embête de devoir les réunir en un seul fichier... Et tu as bien raison. Webpack nous conseille de créer un point d'entrée par page HTML qui appellent un script.
On peut faire plusieurs points d'entrée ? Tout à fait. On peut transformer "entry" en un tableau et faire comme suit :
{"language":"text/javascript","content":"const path = require('path')\nmodule.exports = {\n\tmode: 'development',\n \tentry: ['./src/app.js', './src/products.js'],\n \toutput: {\n \t\tfilename:'bundle.js',\n \tpath: path.resolve(__dirname, 'public')\n \t}\n}","filename":"webpack.config.js"}
Ou même mieux, transformer en un objet et donner des noms à chacun des scripts :
{"language":"text/javascript","content":"const path = require('path')\nmodule.exports = {\n\tmode: 'development',\n \tentry: {\n \t\tapp:'./src/app.js', \n \t\tproducts: './src/products.js'\n \t},\n \toutput: {\n \t\tfilename:'bundle.js',\n \tpath: path.resolve(__dirname, 'public')\n \t}\n}","filename":"webpack.config.js"}
Quelle est l'utilité de redonner des noms à nos scripts dans webpack ?Hé bien en premier lieu, je te laisse essayer de compiler avec le fichier de configuration juste au dessus.
J'ai une erreur ! Error: Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks app and products)C'est normal. Tu es en train de dire à webpack : je veux 2 points d'entrée, mais 1 seul point de sortie. Bilan : erreur.
Il faut donc créer des points de sortie différents. Seulement, on ne précise pas un nom pour chaque point de sortie comme on le fait avec les points d'entrée. On va simplement se baser sur le nom donné à nos scripts en point d'entrée et l'ajouter dynamiquement comme suit :
{"language":"text/javascript","content":"const path = require('path')\nmodule.exports = {\n\tmode: 'development',\n \tentry: {\n \t\tapp:'./src/app.js', \n \t\tproducts: './src/products.js'\n \t},\n \toutput: {\n \t\tfilename:'[name].bundle.js',\n \tpath: path.resolve(__dirname, 'public')\n \t}\n}","filename":"webpack.config.js"}
Comme tu peux le voir, en utilisant [name], on va pouvoir créer le un fichier qui aura pour nom le nom donné à nos scripts (suivi de .bundle.js parce que je l'ai décidé ainsi, mais ce n'est aucunement obligatoire).
Pratique non ? Si tu lances npm run build, tu auras donc 2 fichiers de généré, chacun avec ses dépendances, que tu pourras ajouter respectivement dans index.html et products.html ;)
C'est pratique en effet. J'ai tout compris, merci ! Génial. On va donc passer à la suite : les loaders. Ceux-ci vont nous permettre de gérer les fichiers particuliers (SASS, Vue...)
J'ai terminé cette partie