Webpack 4 — Formation Comprendre Webpack

Je vous propose aujourd'hui de faire un petit tour d'horizon des nouveautés de la version 4 de Webpack.
Avant même d'aller plus loin, il est important de noter que, même si c'est un changement de version majeur, il n'y a pas de changement fondamental au niveau de la configuration. Aussi, Si vous avez passé du temps à créer votre configuration, sachez qu'elle devrait fonctionner avec cette nouvelle version.

Moins de configuration

Un des objectifs de cette nouvelle version est la simplification de la configuration. Il est dorénavant même possible d'utiliser Webpack sans écrire de fichiers de configuration !

Pour limiter le besoin de configuration Webpack va chercher le fichier d'entrée par défaut dans src/index.js et va automatiquement exporter les choses dans le dossier dist. Ainsi si vous respectez cette convention vous n'avez plus besoin de définir ces options dans un fichier de configuration.

Un autre changement important est l'ajout d'un système de mode permettant de définir une série d'option. Par exemple, si vous utilisez le mode production il activera automatiquement la minification du code, alors que si vous utilisez le mode development il activera l'utilisation des sources maps, la mise en cache...
Ce mode peut-être configurer lors de l'utilisation en ligne de commande mais vous pouvez aussi le préciser dans votre fichier webpack.config.js. Si vous voulez en savoir plus sur ce qui se passe derrière (ce qu'active chacun des modes) n'hésitez pas à vous rendre sur ce lien.

Abstraction du système de module.

Enfin, Webpack a effectué un gros changement en interne et ne cible plus le javascript par défaut comme système de module par défaut. Cela va permet à Webpack de supporter de nouveau système de modules en dehors du JavaScript. Actuellement il supporte 4 types de modules :

javascript/auto: (Module supporté par Webpack 3) Module JavaScript avec un système CommonJS, AMD ou ESM
javascript/esm: Modules EcmaScript (par défaut pour les fichiers .mjs)
javascript/dynamic: Seulement CommonJS & AMD sans support des modules EcmaScript
json: Données JSON (par défaut pour les fichiers .json)
webassembly/experimental:
modules WebAssembly (par défaut pour les fichiers .wasm)

Ce qui est intéressant avec ce changement, c'est que Webpack vas pouvoir supporter dans un futur plus ou moins proche des modules CSS ou HTML ce qui permettra à terme d'avoir un fichier HTML ou CSS comme point d'entré (finit le plugin extract text)

Plugins non compatibles

D'après mes tests la plupart des plugins sont prêt pour cette nouvelle version. Seul extract-text-webpack-plugin n'est pour le moment pas prêt et devra être installé depuis la branch next