Ejemplo de Webpack Devtool

Esta opción controla si se generan los mapas de origen y cómo se generan.

Utilizar el SourceMapDevToolPlugin para una configuración de grano más fino. Ver el source-map-loader para hacer frente a mapas de origen existentes.

devtool

string = 'eval' false

Elige un estilo de mapeo de origen para mejorar el proceso de depuración. Estos valores pueden afectar dramáticamente la velocidad de construcción y reconstrucción.

Algunos de estos valores son adecuados para el desarrollo y otros para la producción. Para el desarrollo, por lo general, desea mapas de origen rápidos a costa del tamaño del paquete, pero para la producción, desea mapas de origen separados que sean precisos y admitan la minimización.

Cualidades

bundled code – Ves todo el código generado como una gran cantidad de código. No ve módulos separados entre sí.

generated code – Verá cada módulo separado entre sí, anotado con nombres de módulo. Verá el código generado por webpack. Ejemplo: en lugar de import {test} from "module"; test(); ves algo como var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();.

transformed code – Verá cada módulo separado entre sí, anotado con nombres de módulo. Verá el código antes de que el paquete web lo transforme, pero después de que los cargadores lo transpilen. Ejemplo: en lugar de import {test} from "module"; class A extends test {} ves algo como import {test} from "module"; var A = function(_test) { ... }(test);

original source – Verá cada módulo separado entre sí, anotado con nombres de módulo. Verá el código antes de la transpilación, tal como lo creó. Esto depende del soporte de Loader.

without source content – Los contenidos de las fuentes no se incluyen en los mapas de fuentes. Los navegadores generalmente intentan cargar la fuente desde el servidor web o el sistema de archivos. Tienes que asegurarte de configurar output.devtoolModuleFilenameTemplate correctamente para que coincida con las URL de origen.

(lines only) – Los mapas de origen se simplifican a un único mapeo por línea. Por lo general, esto significa una sola asignación por declaración (asumiendo que la crea de esta manera). Esto le impide depurar la ejecución a nivel de instrucción y configurar puntos de interrupción en columnas de una línea. La combinación con minimización no es posible ya que los minimizadores generalmente solo emiten una sola línea.

Desarrollo

Las siguientes opciones son ideales para el desarrollo:

eval – Cada módulo se ejecuta con eval() y //@ sourceURL. Esto es bastante rápido. La principal desventaja es que no muestra los números de línea correctamente, ya que se asigna al código transpilado en lugar del código original (Sin mapas de origen de los cargadores).

eval-source-map – Cada módulo se ejecuta con eval() y se agrega un SourceMap como DataUrl al eval(). Inicialmente es lento, pero proporciona una velocidad de reconstrucción rápida y produce archivos reales. Los números de línea se asignan correctamente ya que se asignan al código original. Produce SourceMaps de la mejor calidad para el desarrollo.

eval-cheap-source-map – Similar a eval-source-map, cada módulo se ejecuta con eval(). Es “barato” porque no tiene asignaciones de columnas, solo asigna números de línea. Ignora SourceMaps de Loaders y solo muestra código transpilado similar al eval devtool.

eval-cheap-module-source-map – Similar a eval-cheap-source-mapSin embargo, en este caso, los mapas de origen de los cargadores se procesan para obtener mejores resultados. Sin embargo, los mapas de origen del cargador se simplifican a un único mapa por línea.

Casos especiales

Las siguientes opciones no son ideales para desarrollo ni producción. Son necesarios para algunos casos especiales, es decir, para algunas herramientas de terceros.

inline-source-map – Se agrega un SourceMap como DataUrl al paquete.

cheap-source-map – Un SourceMap sin mapeos de columnas ignorando los mapas de origen del cargador.

inline-cheap-source-map – Similar a cheap-source-map pero SourceMap se agrega como DataUrl al paquete.

cheap-module-source-map – Un SourceMap sin mapeos de columnas que simplifica los mapas de origen del cargador a un solo mapeo por línea.

inline-cheap-module-source-map – Similar a cheap-module-source-map pero SourceMap se agrega como DataUrl al paquete.

Producción

Estas opciones se utilizan normalmente en producción:

(none) (Omita el devtool opción): no se emite ningún SourceMap. Esta es una buena opción para empezar.

source-map – Se emite un SourceMap completo como un archivo separado. Agrega un comentario de referencia al paquete para que las herramientas de desarrollo sepan dónde encontrarlo.

hidden-source-map – Igual que source-map, pero no agrega un comentario de referencia al paquete. Útil si solo desea que SourceMaps mapee los rastros de la pila de errores de los informes de errores, pero no desea exponer su SourceMap para las herramientas de desarrollo del navegador.

nosources-source-map – Se crea un SourceMap sin el sourcesContent en eso. Se puede utilizar para mapear seguimientos de pila en el cliente sin exponer todo el código fuente. Puede implementar el archivo de mapa de origen en el servidor web.

Otras lecturas

• Habilitación de mapas de origen
• Mapa de origen de Devtool de webpack