A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack DevTools

21/28
Recursos

Aportes 17

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

<h4>Ideas/conceptos claves</h4>

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.

<h4>Apuntes</h4>
  • 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
<h4>Webpack DevTools</h4>

Podremos analizar nuestro proyecto con esta herramienta. Creamos un 鈥榤apa鈥, 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 鈥榯ypo鈥 al momento de declarar 鈥榮ouce-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 鈥渏s-portfolio鈥 en los sources comprobad que teneis las opciones 鈥淓nable JavaScript source maps鈥 y 鈥淓nable CSS source maps鈥 activadas en las configuraciones de las dev tools