Cursos Empresas Blog Live Conf Eventos Precios

0:004:59

Recursos

Resumen

¿Qué es Webpack Dev Server y por qué es importante?

Cuando trabajamos en proyectos con Webpack, es fundamental contar con un servidor de desarrollo local que nos permita ver los cambios en tiempo real. Webpack Dev Server es una herramienta esencial para este propósito, ya que facilita un entorno dinámico y eficiente para el desarrollo de aplicaciones web. Permite a los desarrolladores probar sus cambios instantáneamente, mejorando el flujo de trabajo y la productividad.

¿Cómo instalar Webpack Dev Server?

Instalar Webpack Dev Server es simple y se hace a través de npm. El siguiente comando se encarga de su instalación como dependencia de desarrollo:

npm install webpack-dev-server --save-dev

Este comando asegura que tengas todo lo necesario para configurar un servidor local de desarrollo al trabajar en proyectos web con Webpack, brindando una experiencia de desarrollo mejorada.

¿Cómo configurar Webpack Dev Server?

Una vez instalado, es necesario realizar algunas configuraciones en el archivo de Webpack específico para desarrollo, generalmente llamado webpack.config.dev.js. Estos son los pasos a seguir para lograr una configuración básica:

Configura el servidor de desarrollo: En el archivo de configuración de desarrollo, introduce lo siguiente en la parte inferior:

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3000
}

Explicación de configuración:
- contentBase: Define la carpeta donde se generarán los archivos compilados, típicamente el directorio 'dist'.
- compress: Habilita la compresión de archivos para acelerar la carga en el navegador.
- historyApiFallback: Facilita la navegación en las aplicaciones de una sola página.
- port: Especifica el puerto en el que se ejecutará el servidor. Se puede cambiar según las necesidades del proyecto.

¿Cómo añadir scripts para iniciar el servidor?

Una vez realizada la configuración, debes agregar un script en el archivo package.json para iniciar fácilmente el servidor de desarrollo local:

"scripts": {
    "start": "webpack serve --config webpack.config.dev.js"
}

Este script utiliza la configuración de desarrollo que hemos definido para iniciar el servidor de forma eficiente.

¿Qué problemas pueden surgir con el modo 'watch'?

Un aspecto importante al configurar Webpack Dev Server es evitar conflictos con el modo 'watch' de Webpack, que automáticamente recompila el proyecto al detectar cambios en los archivos. Al usar Dev Server, es innecesario habilitar 'watch', ya que el servidor maneja esta función internamente. Para resolver cualquier advertencia o problema de duplicación, asegúrate de que 'watch' esté desactivado en la configuración de Webpack.

Realiza cambios y observa los resultados en tiempo real

Cambiar y ver resultados al instante es uno de los beneficios más grandes de Webpack Dev Server. Por ejemplo, si decides modificar los estilos CSS en tu proyecto, como cambiar un color de rojo a negro, simplemente guarda los cambios y actualiza el navegador. La respuesta es inmediata, permitiendo iteraciones rápidas y eficientes.

Sobre la optimización y análisis de tu proyecto

Una vez que el entorno de desarrollo local está configurado, puedes centrarte en analizar el 'bundle' de tu proyecto. Revisa las dependencias para identificar áreas optimizables que mejoren el rendimiento del proyecto. Esta práctica no solo ayuda a mantener un código limpio, sino que también optimiza los tiempos de carga y mejora la experiencia de los usuarios finales.

Configurar un entorno de desarrollo local eficiente con Webpack Dev Server es un paso esencial para cualquier desarrollador web. Aprovechando estas herramientas, tu flujo de trabajo será más ágil, permitiéndote experimentar y refinar tus proyectos en tiempo real. ¡Dedica tiempo a la configuración inicial y verás cómo se transforma tu proceso de desarrollo!

Configuración de Webpack Dev Server para Desarrollo Local

Curso de Webpack

Clase 19 / 28

Ver clases

Configuración de Webpack Dev Server para Desarrollo Local

Curso de Webpack

Clase 19 de 28

Clase 19 / 28

Configuración de Webpack Dev Server para Desarrollo Local

Curso de Webpack

Clase 19 / 28

Ver clases

Fernando Quinteros Gutierrez#2328914

🍰 Webpack Dev Server

Ideas/conceptos claves

HTML5 History API permite la manipulación de session history del navegador, es decir las páginas visitadas en el tab o el frame en la cual la página está cargada.

Recursos

How To Optimize Your Site With GZIP Compression

Apuntes

Cuando trabajamos con webpack deseamos ver los cambios en tiempo real en un navegador
Para tener esta característica esta webpack-dev-server
Para ello debemos instalarlo

NPM

npm install -D webpack-dev-server

Yarn

yarn add -D webpack-dev-server

Posteriormente debemos agregar la siguiente configuración en webpack.config.dev.js
- Lo hacemos en la configuración de desarrollo debido a que esta característica solo nos ayudara a ver cambios al momento de desarrollar la aplicación

module.exports = {
	...
	devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3000,
  }
}

En la configuración podemos observar lass siguientes propiedades
- contentBase ⇒ Le dice al servidor donde tiene que servir el contenido, solo es necesario si quieres servir archivos estáticos
- compress ⇒ Habilita la compresión gzip
- historyApiFallback ⇒ cuando estas usando HTML5 History API la página index.html sera mostrada en vez de una respuesta 404
- Port ⇒ es el puerto donde vamos a realizar las peticiones
Para comenzar a utilizarlo debes agregar el siguiente script a package.json

{
	...
	"scripts": {
	...
	"start": "webpack serve --config webpack.config.dev.js"
	}
}

Comentarios (62)62 comentarios

Obed Paz

Hace 5 años

Actualmente Webpack Dev Server ha cambiado un poquito algunas de sus opciones estan deprecadas, la documentacion oficial parace que no ha sido actualizada, sin embargo los cambios son pequeños:

. Asegurense de cambiar la propiedad contentBase por static, de este modo:

devServer: {
		static: path.join(__dirname, 'dist'),
		compress: true,
		historyApiFallback: true,
		port: 8080,
		open: true,
	}

. Por convencion, el archivo html raiz que las tecnologias buscan se llama index.html, entonces verifiquen que su html resultante en la carpeta dist, lleve ese nombre para que se le sea facil encontrarlo.

plugins: [
		new HtmlWebpackPlugin({
			inject: 'body',
			template: './public/index.html',
			filename: './index.html',
		}),
	],

. Finalmente el script en el package.json lo corren sin problemas:

	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "node ./scripts/create-env.js && webpack --config webpack.config.js",
		"dev": "webpack --config webpack.config.dev.js",
		"watch": "webpack --config webpack.config.dev.js --watch",
		"start": "webpack serve --config webpack.config.dev.js"
	},

Carlos Luis Marin

Hola, me da error siguiendo tu explicación

Hola carlos 👋 Puedes compartir el output de tu error?

Daniel Bravo Campino

Hola , vengo del año 2021 mes de octubre, y el webpack-dev-server no me recargaba automaticamente el navegador, resulta que se actualizo la documentación y ahora no viene por defecto esta funcionalidad, por lo que agregué unas lineas de codigo para arreglarlo:

link documentación webpack-dev-server

Antes

devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        historyApiFallback: true,
        port: 3006,
        open: true,  //Hace que se abra en el navegador
    }
}

Despues

devServer: {
    static: 
    {
      directory: path.join(__dirname, "dist"),
      watch: true,
    },
    watchFiles: path.join(__dirname, "./**"), //observa los cambios en todos nuestros archivos y actualiza el navegador
    compress: true,
    historyApiFallback: true,
    port: 3006,
    open: true, //Hace que se abra en el navegador
    
  },

Edgar Ubaldo

++Denle corazon a este comentario por favor++

Ramon Pocón

muchas gracias voy a leer la documentación!

Carlos Rosado

Hace 6 años

también pueden agregar el siguiente código

open: true

y se abrirá en el navegador automáticamente

Vicki Esther Avola

Hola, a mi no me funcionó, tienes idea del porqué?

ok eso va dentro de devServer ejemplo

devServer: {
	open: true
}

Fernando Quinteros Gutierrez

Shoar Bet-el Sumi Huanca

 npm run start

> js-portfolio@1.0.0 start
> webpack serve --config webpack.config.dev.js

[webpack-cli] No need to use the 'serve' command together with '{ watch: true }' configuration, it does not make sense.
[webpack-cli] webpack Dev Server Invalid Options

options should NOT have additional properties

npm ERR! code 2
npm ERR! path D:\PLATZI\js-portfolio
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c webpack serve --config webpack.config.dev.js

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\SHOAR\AppData\Local\npm-cache\_logs\2021-03-11T00_50_33_985Z-debug.log

en ejecutar npm start me dice que No puede tener propiedades adicionales :'(

Paolo Joaquin Pinto Perez

@shoar.sumi.platzi te fijaste en no tener typos?, yo tenía el mismo problema y era porque escribí mal el atributo historyApiFallback:

devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        historyApiFallback: true,
        port: 3007,
    }

Jorge Iván Otero Vargas

No me funcionó y me daba pantalla blanca por un momento, luego encontré que el script para generar el .env se ejecutó y dejó en undefined el valor de la url API, por si alguien tiene el mismo inconveniente

API=https://randomuser.me/api/

Jorge de Jesús Macías Morales

Eso pasa cuando corremos el modo "prod" de manera local, ya que a la hora que deployamos la app en netlify, creamos la variable de entorno en el server, es por eso que no la encuentra cuando se hace de manera local y por eso se pone undefined. No estoy seguro pero una manera de arreglar eso es enviarle el valor de la varibale en el script en el package.json algo asi como ``` "watch:prod" : "API="elurl" && webpack --watch --config webpack.config.js"

Cynthia Tatiana Flores Zeledón

Gracias, me sirvió el dato.

Martín David Roldán

Al usar contentBase me daba un error y el servidor no corria. Tuve que reemplazarlo por static

 devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3006,
    open: true
  }

Edgar Alejandro España Amaya

Gracias me sirvió tenia el mismo error.

julian david gomez granda

sin complique, copy and paste y perfecto

Miguel Steban Bello Munevar

les recomiendo leer la nueva documentación de webpack para el 2022 aun así dejo acá mi configuración en webpack.config.dev.js

    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
            watch: true
        },
        watchFiles: path.join(__dirname, "./**"), 
        compress: true,
        historyApiFallback: true,
        port: 3006,
        open: true, 
    },

Juan Carlos Rosas Santillán

Hace 4 años

Muchas gracias con esto solucione mi error, también tuve que actualizar node.

Sergio Morgan

Para quienes tengan este error

Prueben cambiando la siguiente linea en el archivo webpack.config.dev.js. Donde dice:

contentBase: path.join(__dirname, 'dist'),

Reemplazar por:

static: path.join(__dirname, 'dist'),

Al menos, a mi mi funcionó

Jose Julio Peña Peña

Muy buen aporte, me funciono

NELSON FERNANDO PINZON ARANZAZU

ctrl + L, limpia la consola, mas rapido que escribir clear

Mario Osvaldo Méndez Pino

siii ctrl + L ayuda mucho, lo que hace es "como" bajar con el scroll del mouse, lo bueno que después puedes volver a revisar los que arrojo la consola :)

Brayan Ramirez Alzate

alguien sabe por que me sale esto? la propiedad que me marca como unknown esta bien escrita


[webpack-cli] No need to use the 'serve' command together with '{ watch: true }' configuration, it does not make sense.
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

Héctor Eduardo López Carballo

Hola!

Te está diciendo que no es necesario que escribas {watch: true} porque es redundante. Intenta borrando esa opción y checa si funciona de nuevo, pls.

Ezequiel Carvajal Oporta

A mi me apareció lo mismo, lo hice así: devServer: { static: { directory: path.join(__dirname, 'public'), }, compress: true, port: 9000, }, De la pagina oficial y me sirvió.

DAMIÁN NICOLAS PINEDO

a mi me fue bien sin errores pero no esuccha los cambios en tiempo real, tampoco me muestra las fonts como deben ser

Diego Alvaro Parra Abad

Carlos S. Aldazosa

Pudiste solucionarlo? me pasa lo mismo

Daniel Flores

Esto es lo mismo que live server, no?

Carlos Eduardo Gomez García

Casi, pero este sí es capaz de hostear aplicaciones con frameworks y librerías de JavaScript como Vue o React :D

Joel Eduardo Sánchez Herrera

Cuando trabajamos con webpack queremos ver los cambios en tiempo real, tener un servidor de desarrollo local, esto se puede con webpack dev server, solo tenemos que instalarlo:

npm install webpack-dev-server -D

Ya instalado lo vamos a configurar unicamente en el modo desarrollo. Al final solo agregamos la configuracion:

devServer: {
	contentBase: path.join(__dirname, 'dist'),
	compress: true,
	historyApiFallback:true,
	port:3006,
	open:true
}

Ahora agregamos la configuracion en nuestro package asi:

"start" : "webpacl serve --config webpack.config.dev.js",

El modo watch debe de estar desactivado.

Yonier Julián Arias Pérez

Actualmente hay que agregar dos lineas de código mas y remplazar la palabra **contentBase **con static

static: path.join(__dirname, 'dist'),//cambio de palabra contentBase 
watchFiles: path.join(__dirname, "./**"), //para recargar el navegador automáticamente
open: true //abrir el navegador al correr el script

Luis Miño

A día 25/03/2022 la configuración con la que me funcionó correctamente es:

package.json

 "start": "webpack serve --config webpack.config.dev.js"  },

webpack.config.dev.js

...

plugins: [
    new HtmlWebpackPlugin({
      inject: 'body',
      template: './public/index.html',
      filename: './index.html'
    })

...

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
  },

Fernando Galdós

Gracias! Me sirvio mucho tu aporte, han cambiado ciertas configuraciones desde que se hizo el curso.

Leobardo Licona Soto

NOTAS SOBRE ERRORES

Si te aparece este error:

Ve a la documentación oficial de devServe: https://webpack.js.org/configuration/dev-server/, al día de hoy este error se puede solucionar de la sigueinte manera:

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, 
    historyApiFallback: true,
    port: 3006,
  },

Daniel Felipe Merchan Fuquen

¿Qué diferencia habría entre el script dev y el de start? Veo que ambos son para entornos de desarrollo. No se debería dejar 1 de los 2? O se mantienen los dos a manera de ejemplo.

Omar García Betanzos

Start esta corriendo la aplicación en el servidor de Webpack

Santiago Escalante

Cuando lanzas

npm run start

estas levantando un servidor para levantar tu aplicación: al editar el código fuente de tu aplicación, estas modificaciones se ven reflejadas "en vivo" (Live Reloading) en tu navegador. Mientras que

npm run dev

(en este caso) hace lo mismo, SIN levantar el servidor. !Imgur

Es decir que confías que en la modificación que hiciste en tu aplicación es la correcta sin la necesidad de verla reflejada en un navegador.

Fernando de Jesus Basurto Villegas

pequeño tip, note que aunque webpack este escuchando si recompila tu proyecto pero tu debes recargar para ver los cambios si se quieren evitar esto añadan en la configuracion de dev server lo siguiente :

liveReload: true,

de tal forma que quede así:

    devServer:{
        static: path.join(__dirname, 'dist'),
        compress:true,
        historyApiFallback:true,
        port:3006,
        watchFiles: path.join(__dirname, 'src'),
        liveReload: true,
    },

Juan David González Rodríguez

Que diferencias hay entre webpack-dev-server y usar la utilidad de watch de webpack?

Nilson Diaz

Hey! Realmente lo especial de webpack-dev-server esque te brinda un servidor de desarrollo como dice su nombre donde correr tu aplicacion con tus configuraciones de webpack , o un entorno de desarrollo profesional, de esta manera puedes ir al navegador y ver tu aplicacion funcionando, aparte utiliza webpack watch para verificar cada vez que ocurra un cambio

Espero te ayude !

Si bastante muchas gracias? osea basicamente el watch solo verifica que cambios se hicieron , mientras que webpack dev server ejecuta un servido para ver los cambios en tiempo real !! ? si jaja :D

Juan Pablo Cortés

Si te arroja un arroja en la terminal y estás viendo esto después del diciembre 2022. Esta es la sintaxis de DevServer ...

module.exports = {
...
 devServer: {
    static: {
      directory: Path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 8000,
   },
}

}

Esta es documentación

Recursos

Resumen

Configuración de Webpack Dev Server para Desarrollo Local

Configuración de Webpack Dev Server para Desarrollo Local

Configuración de Webpack Dev Server para Desarrollo Local

Progreso del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

Configuración de Webpack Dev Server para Desarrollo Local

Configuración de Webpack Dev Server para Desarrollo Local

Recursos

Resumen

¿Qué es Webpack Dev Server y por qué es importante?

¿Cómo instalar Webpack Dev Server?

¿Cómo configurar Webpack Dev Server?

¿Cómo añadir scripts para iniciar el servidor?

¿Qué problemas pueden surgir con el modo 'watch'?

Realiza cambios y observa los resultados en tiempo real

Sobre la optimización y análisis de tu proyecto

Comentarios

Recursos

Resumen

¿Qué es Webpack Dev Server y por qué es importante?

¿Cómo instalar Webpack Dev Server?

¿Cómo configurar Webpack Dev Server?

¿Cómo añadir scripts para iniciar el servidor?

¿Qué problemas pueden surgir con el modo 'watch'?

Realiza cambios y observa los resultados en tiempo real

Sobre la optimización y análisis de tu proyecto

Comentarios

🍰 Webpack Dev Server

Ideas/conceptos claves

Recursos

Apuntes