¿Sabes para qué se usa DevServer en webpack.js? ¿Y por qué es importante dentro del desarrollo web? En este post, encontrarás las respuestas a ambas preguntas, ya que profundizaremos en el concepto de DevServer, en cómo se instala dentro de un programa de código y en cuál es su importancia.
DevServer en webpack.js
DevServer en webpack.js es un elemento que tenemos que utilizar para el desarrollo si queremos tener webpack dentro de nuestro programa de código. Por lo tanto, es muy importante conocer la dependencia y cómo instalarla. DevServer forma parte de un grupo de opciones o herramientas para construir un entorno de desarrollo con webpack.js. Aunque además de las herramientas de desarrollo hay otras formas de construir un entorno de desarrollo, como el uso de mapa de fuentes, estas se utilizan mucho más.
Al margen del DevServer en webpack.js, con esta herramienta encontramos el webpack Watch Mode y el webpack-dev-middleware, que tienen el mismo objetivo y una documentación igual de detallada, que verás en el sitio web de webpack.js.
webpack-dev-server
La forma más sencilla que almacena la opción DevServer en webpack.js, en el programa que estamos desarrollando o en un repositorio que lo emplee es el comando webpack-dev-server. Esta es una herramienta que nos ofrece un sitio web rudimentario y muy útil, así como la opción de utilizar el live-reloading.
Antes de ver todas sus funcionalidades, vamos a empezar mostrándote el comando para instalarlo. Lo puedes ejecutar en tu línea de comandos.
npm install --save-dev webpack-dev-server
Ahora, puedes ver cómo pasamos dicho comando:
Además, debes estar seguro de haber añadido la opción de desarrollo del webpack dentro de los scripts de tu archivo de package.json.
DevServer y webpack-dev-server
ADevServer no es una opción por sí misma dentro del entorno de desarrollo que puedes crear con webpack.js. Más bien se trata de un conjunto de opciones que se almacena dentro de este mundo, que es mucho más grande y deriva en diferentes objetos.
DevServer en webpack.js es una opción de webpack-dev-server que se utiliza para cambiar el comportamiento de este paquete en diferentes formas.
A su vez, puedes invocar DevServer de distintas maneras:
- Con API: npm install –save-dev webpack webpack-dev-server con la API de Node.JS.
- Con CLi: npx webpack serve.
Para sacarle mayor provecho a DevServer en webpack.js, se han ido ejecutando diferentes opciones que nos permiten cumplir diversas tareas y objetivos. Algunas de estas opciones son:
- devServer.allowedHosts nos permite crear una lista de hosts que pueden acceder a nuestro servidor.
- devServer.bonjour nos permite alojar y abrir el servidor desde ZeroConf.
- devServer.client es la opción que nos permite establecer un nivel de registro desde el navegador. Este almacena otras subopciones para establecer otros niveles u otras herramientas que necesitemos.
- devServer.compress nos permite habilitar el gzip compression.
¿Qué puede pasar ahora?
Gracias a este artículo has aprendido para qué se usa DevServer y por qué es tan importante dentro del trabajo de desarrollo. No obstante, hay muchas más opciones que trae DevServer en webpack.js, por lo que aún te queda mucho camino por recorrer. Para ello, te invitamos a revisar el programa de nuestra formación en Desarrollo Web Full Stack Bootcamp, con la que le sacarás el máximo provecho a todo lo que pueden enseñarte nuestros profesores expertos. ¡Anímate a cambiar tu futuro laboral y entra ahora!
