Questions sur Webpack

Neewd
Javascript NodeJS

Bonjour,

J'ai commencé mon petit projet avec Vue.js et dans la documentation, il est conseillé d'utiliser un bundler tel que Webpack ou Browserify.
J'ai donc regardé la vidéo de Graf' sur Webpack, mais j'ai quelques questions qui me viennent.

Personnellement, j'ai créé un serveur Express et je lance mongo etc via des tâches Grunt.
J'ai donc plusieurs fichiers JS :

  • un nommé "server.js" qui traite avec les routes, les contrôleurs, mongoose, les modèles

  • un fichier vue.js "app.js" qui regroupe toutes ma logique sur mon fichier HTML que l'on va nommé "login.html".

    Dans le futur, je vais créer d'autres pages HTML, qui auront eux aussi leurs fichiers vue.js pour éviter de s'y perdre.

    De plus si j'ai un serveur Express, à quoi peut me servir le webpack-dev-server si je met livereload via Express ?

Voilà mes petites incompréhensions sur Webpack.

Dans son tutoriel d'explication, Graf' n'avait qu'une page, et qu'un fichier "js".
Auriez-vous un exemple "parlant" d'une gestion Webpack avec Vue.js et Express ?

Merci à vous pour votre aide,

2 réponses

Pandazaur
Réponse acceptée

Bonsoir,

L'avantage de Webpack est qu'il te permet grâce au vue-loader de créer des fichier ".vue", qu'il incorpore un serveur avec Live-reload et des plugins en tout genre.

Tu peux très bien construire ton app avec ton système actuel, mais tu as tout de séparé et tu dois utiliser pas mal de resource différente. Webpack te permet d'avoir tout en un. Je pense que pour une grosse application, il est préférable d'utiliser un module bundler.

Personnellement j'utilise webpack, car grâce au vue-cli:

  • Il me crée la structure d'une application Vue.js très rapidement
  • Je peux structurer mon application grâce à ES6 (avec Babel) et les fichiers ".vue"
  • Je peux utiliser des préprocesseurs / moteurs de templates facilement grâce aux plugins Webpack
  • Une commande npm run build qui me compile tout ça pour la prod (compatible ES5 avec les autres navigateurs + minifié)
  • Un serveur avec hot-reload

Tu peux faire tout ca avec grunt ou gulp mais bon, c'est pas aussi pratique a mon avis

Neewd
Auteur

Merci Pandazaur,
Je me suis renseigné hier, et j'ai commencé à intégrer webpack à mon workflow et je suis tombé sur tout un tas d'erreur. J'ai notamment passé près de deux heures à me rendre compte que je n'avais pas entouré les "loaders" d'une balise "module" et je ne comprenais pas pourquoi mes "imports" n'étaient pas transpile correctement et étaient rejetés par le browser ...

Je me suis renseigné sur le vue-loader et j'vais bien décomposé mon projet à partir de maintenant, avant que ça parte en cacahuète et que ça devienne incontrôlable :D