Configurar webpack para permitir la depuración del navegador

130

Soy nuevo en webpack y estoy convirtiendo una aplicación web existente para usarlo.

Estoy usando webpack para agrupar y minimizar mi JS, lo cual es excelente cuando se implementa, sin embargo, esto hace que sea muy difícil depurar durante el desarrollo.

Por lo general, uso el depurador integrado de Chrome para depurar problemas de JS. (O Firebug en Firefox). Sin embargo, con el paquete web todo se rellena en un archivo y se vuelve difícil de depurar utilizando ese mecanismo.

¿Hay alguna manera de activar y desactivar rápidamente el agrupamiento? o encender y apagar minificar?

He buscado ver si hay alguna configuración del cargador de scripts u otra configuración, pero no parece obvia.

Todavía no he tenido tiempo de convertir todo para que actúe como un módulo y el uso lo requiere. Así que simplemente uso el patrón require ("script! ./ file.js") para mi carga.

javascript webpack Jim
fuente
3
¿Terminaste encontrando una solución a este problema? También prefiero usar la consola JS para ver las variables disponibles. Mi principal problema es que el paquete web oculta todas estas variables dentro del módulo, por lo que se vuelven inaccesibles
usuario1496984
2
Realmente nunca encontré una solución, así que desafortunadamente abortamos el uso de webpack.
Jim
Que usas ahora? En el momento de escribir webpack todavía parece la herramienta de compilación más popular que puedo encontrar.
Richard

Respuestas:

100

Puede usar mapas de origen para preservar el mapeo entre su código fuente y el paquete / minificado.

Webpack proporciona la opción devtool para mejorar la depuración en la herramienta de desarrollador simplemente creando un mapa fuente del archivo incluido para usted. Esta opción se puede usar desde la línea de comandos o en su archivo de configuración webpack.config.js .

A continuación puede encontrar un ejemplo artificial utilizando la línea de comando para generar el archivo incluido ( bundle.js ) junto con el archivo de mapa fuente generado ( 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();

hola.js

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

Si abre index.html en su navegador (uso Chrome pero creo que también es compatible con otros navegadores), verá en la pestaña Fuentes que tiene el archivo incluido debajo del archivo: // esquema y los archivos fuente debajo el paquete web especial : // esquema.

depurar con mapas fuente

¡Y sí, puede comenzar a depurar como si tuviera el código fuente original! Intente poner un punto de interrupción en una línea y actualice la página.

punto de interrupción con mapas fuente

dreyescat
fuente
2
bundle.map apunta al archivo js, ​​pero ¿y si el archivo js real también tiene un mapa para decir tsx o ts?
Andrej Kovacik
3

Los mapas fuente son muy útiles como ya se señaló.
Pero a veces seleccionar qué mapa fuente usar puede ser un dolor.

Este comentario sobre uno de los problemas del mapa fuente de Webpack podría ser útil para seleccionar qué mapa fuente usar según los requisitos.

Abhinav Singi
fuente
1

Echa un vistazo aquí

es un embellecedor que desminifica javascript. en la parte inferior, tiene una lista de varios complementos y extensiones para navegadores, échales un vistazo.

es posible que esté interesado en FireFox Deminifier , se supone que desminifica y da estilo a su JavaScript cuando se recupera del servidor.

ingrese la descripción de la imagen aquí

Plátano
fuente
10
desminificar no es lo mismo que deshabilitar la minificación ya que los comentarios aún se eliminan, los números de línea ya no coinciden y los nombres de las variables no son lo mismo. Dicho esto, es mejor que nada.
Jim
1

Chrome también tiene una opción de formato en el depurador. No tiene toda la información que tendría un archivo fuente normal, pero es un gran comienzo, también puede establecer puntos de interrupción. El botón en el que hace clic está en la parte inferior izquierda de la primera captura de pantalla, se parece a {}.

Antes de formatear: ingrese la descripción de la imagen aquí

Después de formatear.

ingrese la descripción de la imagen aquí

Jolly1234
fuente