Webpack DevTools

Buenas,
Si tienen problemas con este clase y el siguiente error:

El profesor se salto la parte de msotrar cuando agrega el .BundleAnalyzerPlugin al final de la linea de la siguiente forma:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

🐛 Webpack DevTools

source map es un mapeo que se realiza entre el código original y el código transformado, tanto para archivos JavaScript como para archivos CSS. De esta forma podremos debuggear tranquilamente nuestro código.

• Con las devtools de webpack te permite crear un mapa de tu proyecto y con el podemos
  • Leer a detalle
  • Analizar particularidades de lo que está compilando nuestro proyecto
• Para comenzar debemos ir a webpack.config.js y agregar la propiedad devtool: "source-map"
  • Esta opción genera un source map el cual posteriormente chrome lo lee y te permite depurar de una mejor forma

Podremos analizar nuestro proyecto con esta herramienta. Creamos un ‘mapa’, con esto podemos abrir las herramientas de desarrollo, entrar a los archivos de JS y al hacer click en una línea de código, esta nos llevará a otro archivo donde se esté ejecutando el código.

Si tienen un error, por favor en su archivo de configuración webpack.config.dev:
En la linea 6, agreguen esto así:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

o de esta otra forma:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Si les sale error al ejecutar
npm run dev
Y el error es porque noencuentra webpack-bundle-analyzer

Ejecuten este comando para que npm lo instale correctamente:

npm install --save-dev webpack-bundle-analyzer

Y luego si funciona normal

npm run dev

y claro que, debe estar en webpack.config.dev.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

fuente

Este curso me está ayudando el porque funcionan algunas cosas en React, bastante útil

Aqui un ejemplo de proyecto con VueJS con webpack, para mostrar el nivel de sourcemap que se puede requerir.

const isDev = process.env.NODE_ENV === 'development'

const DevtoolLevel = {
  NONE: 'none',
  EVAL: 'eval',
  CHEAP_EVAL_SOURCE_MAP: 'cheap-eval-source-map',
  CHEAP_MODULE_EVAL_SOURCE_MAP: 'cheap-module-eval-source-map',
  EVAL_SOURCE_MAP: 'eval-source-map',
  CHEAP_SOURCE_MAP: 'cheap-source-map',
  CHEAP_MODULE_SOURCE_MAP: 'cheap-module-source-map',
  INLINE_CHEAP_SOURCE_MAP: 'inline-cheap-source-map',
  INLINE_CHEAP_MODULE_SOURCE_MAP: 'inline-cheap-module-source-map',
  SOURCE_MAP: 'source-map',
  INLINE_SOURCE_MAP: 'inline-source-map',
  HIDDEN_SOURCE_MAP: 'hidden-source-map',
  NO_SOURCES_SOURCE_MAP: 'nosources-source-map',
}

const config = {
  mode: isDev
    ? 'development'
    : 'production',
  devtool: isDev ? DevtoolLevel.SOURCE_MAP : DevtoolLevel.CHEAP_SOURCE_MAP
}

Para el caso de VueJS podemos escoger el tipo de recurso en función del la estructura del proyecto que tengamos.

const NODE_DIR = path.resolve(__dirname, 'node_modules')
const VUE_DIST_DIR = path.resolve(__dirname, NODE_DIR + '/vue/dist')

const isDev = process.env.NODE_ENV === 'development'
const buildType = process.env.BUILD_TYPE

const vueBuildType = {
  umd: isDev // UMD
    ? VUE_DIST_DIR + '/vue.js'
    : VUE_DIST_DIR + '/vue.min.js',
  commonjs: VUE_DIST_DIR + '/vue.common.js', // CommonJS
  bundlers: VUE_DIST_DIR + '/vue.esm.js', // ESM (for bundlers)
  browsers: isDev // ESM (for browsers)
    ? VUE_DIST_DIR + '/vue.esm.browser.js'
    : VUE_DIST_DIR + '/vue.esm.browser.min.js',
}

const config = {
  resolve: {
    alias: {
      'vue$': vueBuildType[ buildType ]
    }
  }
}

Así podemos aislando la configuración de webpack en variables y poder ingresar nuestro proyecto mas fácilmente en algún entorno de de despliegue

No me funciona del todo, no da error ni nada y al inspeccionar la pestaña de sources en el navegador me dice source map detected, pero al darle a la linea 139 como el profesor en vez de llevarme a la función solo me marca un breakpoint y mas nada, alguien sabe que sera?

El modo Dev Tools permite crear un mapa del código que nos permite ver a detalle y analizar cada una de las particularidades del proyecto.

Primero hay que agregar una configuración en el archivo de configuración para desarrollo, agregaremos la propiedad devtool con un valor de source-map, esto permitirá generar el mapa del código en formato JSON.

Una vez hecho esto corremos Webpack con la configuración de desarrollo y para ver las ventajas que nos da generar un mapa tenemos que abrir las DevTools del navegador y en el apartado source veremos el archivo de JS de la aplicación, el mapa nos permite dar click en cualquier parte del código y verla de forma clara.

Por si a alguien le sale mimificado su archivo index.js a pesar de tenerlo en modo development, puede eliminar el optimization para la configuración en desarrollo.

Algo particular para poder revisar nuestro codigo es el modo DEVTOOLS que nos hara un mapa para poder ver a forma mas detallada cualquier cosa o problema que podamos tener.

En la configuracion de desarrollo tenemos que agregar abajo del mode el codigo:

devtool: 'source-map';

Y al momento de compilar en DEV podremos ver un nuevo archivo donde vendra tood el codigo que hicimos pero es dificil de entender o de debuggear. Por eso existen los mapas y al momento de inspeccionar en el apartado de sources ahi podremos ver que google nos da la opcion de ver el mapa y ver parte por parte nuestro codigo.

2 horas peleando con este error, intentando reinstalar webpack, el dev-server, el analyzer…

cuando el problema era un ‘typo’ al momento de declarar ‘souce-map’

Moraleja: lean detenidamente el error, ahi suele estar la respuesta

Que practico poder separar el bloque de código que esta potencialmente mal para editarlo y debuguear desde el navegador, genial!

No conocia esta carateristica de webpack para **DEPURAR ** el codigo.
.
Se integra perfecto con las herramientas de **DEPURACION ** de codigo de chrome.
.

21.-Webpack DevTools

.
Nos permite crear un mapa de nuestro código para poderlo analizar a detalle.

• Identificar nuestro archivo de desarrollo y crear una configuración específica que necesitamos para esto.

devtool: "source-map", //Genera mapa en JSON.

• Ejecutamos npm run dev y vemos que abre el bundle analyzer que pudimos ver la clase pasada y ahora vemos que en la carpeta dist hay dos elementos, el main compilado y el archivo del mapa en json con la estructura de los elementos de la app.
• Cuando abrimos el proyecto e inspeccionamos algún elemento vamos a source y vemos nuestro main, aquí podremos ver todos los recursos de la app con sus particularidades, para facilitar el debuggeo usamos los mapas que el navegador detecta. Si queremos revisar a detalle una pieza de código solo le damos click y la aisla por nosotros.

Si no os aparece la carpeta “js-portfolio” en los sources comprobad que teneis las opciones “Enable JavaScript source maps” y “Enable CSS source maps” activadas en las configuraciones de las dev tools