Configurer le Webpack pour permettre le débogage du navigateur

Question

Je suis nouveau sur WebPack et je convertis une application Web existante pour l'utiliser.

J'utilise webpack pour regrouper et minimiser mon JS, ce qui est très bien lorsqu'il est déployé, mais cela rend très difficile le débogage en cours de développement.

J'utilise généralement le débogueur intégré de Chrome pour résoudre les problèmes JS. (Ou Firebug sur firefox). Cependant, avec Webpack, tout est stocké dans un fichier et il est difficile de déboguer avec ce mécanisme.

Existe-t-il un moyen d'activer et de désactiver rapidement les offres groupées? ou allumer et éteindre minifying?

J'ai regardé pour voir s'il y a une configuration de chargeur de script ou un autre paramètre mais cela ne semble pas ovieux.

Je n'ai pas encore eu le temps de tout convertir pour qu'il fonctionne comme un module et que l'utilisation en nécessite. J'utilise donc simplement le modèle require ("script! ./ file.js") pour mon chargement.

dreyescat · Accepted Answer

Vous pouvez utiliser source maps pour conserver le mappage entre votre code source et celui fourni/minifié.

Webpack fournit l'option devtool pour améliorer le débogage dans l'outil de développement en créant simplement une carte source du fichier fourni pour vous. Cette option peut être utilisée à partir de la ligne de commande ou dans votre fichier de configuration webpack.config.js.

Vous trouverez ci-dessous un exemple artificiel utilisant la ligne de commande pour générer le fichier fourni (bundle.js) avec le fichier de carte source généré (bundle.js.map).

$ webpack --devtool source-map ./entry.js bundle.js Hash: b13b8d9e3292806f8563 Version: webpack 1.12.2 Time: 90ms Asset Size Chunks Chunk Names bundle.js 1.74 kB 0 [emitted] main bundle.js.map 1.89 kB 0 [emitted] main [0] ./entry.js 85 bytes {0} [built] [1] ./hello.js 59 bytes {0} [built]

index.html

<html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html>

entry.js

var hello = require('./hello.js'); document.body.innerHTML += 'It works ' + hello();

bonjour.js

module.exports = function () { return 'Hello world!'; };

Si vous ouvrez index.html dans votre navigateur (j'utilise Chrome mais je pense qu'il est également pris en charge par d'autres navigateurs), vous verrez dans l'onglet Sources que vous avez le fichier fourni sous le fichier: // schéma et les fichiers source sous le schéma spécial webpack: //.

Et oui, vous pouvez commencer à déboguer comme si vous aviez le code source original! Essayez de mettre un point d'arrêt sur une ligne et actualisez la page.