sourcemaps how devtool javascript webpack google-chrome-devtools webpack-2

javascript - how - DevTools no pudo analizar SourceMap



webpack devtool option (1)

Chrome recientemente agregó soporte para mapas de origen en las herramientas de desarrollo. Si accede a la configuración en la barra de herramientas de desarrollador de Chrome, puede ver las dos opciones siguientes

y en las fuentes

Deshabilitado Enable javaScript source map y Enable CSS Source maps .

Si desactiva esas dos opciones y actualiza el navegador, ya no debería solicitar mapas de origen.

Estoy intentando que mi proyecto Webpack tenga un archivo de mapa fuente.

Finalmente obtuve la configuración correcta para que hiciera eso, pero ahora recibo este error:

DevTools no pudo analizar SourceMap: http: //MyServer/MyApp/bundle.js.map

Voy a la URL que indica y encuentro un archivo json con estas propiedades:

  • versión - Establecer en 3
  • fuentes : una gran variedad de cadenas que parecen ser rutas de paquetes web para mis archivos.
  • nombres : muy largo conjunto de cadenas que parecen ser variables y funciones aleatorias.
  • mapeos : cadena muy larga de comillas y letras del capitolio aparentemente aleatorias.
  • archivo - establecido en bundle.js
  • sourcesContent - Very Very long array of strings (más de 10 millones de caracteres). Todo mi código fuente
  • sourceRoot : establecido en una cadena vacía

Todo parece ser válido json. Desafortunadamente, Chrome no da ninguna razón por la cual no pudo analizar el mapa fuente.

¿Hay alguna manera de hacer que Chrome diga por qué falló al analizar el mapa fuente?

O, en su defecto, ¿alguien sabe por qué mi mapa fuente fallará? (Mi código es demasiado grande para publicar, pero aquí están mis archivos webpack.config.js y mis package.json ).

NOTAS:

  • Lo he intentado con el paquete web 2.2.1, el paquete web 2.3.2 y el paquete web 2.6.1.
  • Los mapas de origen funcionan bien en IE 11 y Firefox.
  • Si inserto mis mapas de origen, entonces funcionan bien en Chrome DevTools, pero luego mi bundle.js va de 3 MB (ya demasiado grande) a 16 MB (WAY demasiado grande).
  • He configurado "Habilitar JavaScript Source Maps" en la configuración (y el CSS también).
  • Intenté usar Chrome Canary, pero tenía el mismo problema.
  • Estoy alojando en IIS.