Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Cómo instalar Webpack

Pablo Fernandez
  • Escrito por Pablo Fernandez el 05 de Febrero de 2019
  • 2 min de lectura | Desarrollo Web
Cómo instalar Webpack
El reproductor de video será cargado en breves instantes.

Requisitos previos

Para instalar WebPack necesitaremos cumplir una serie de requisitos, que son los siguientes:

  • Tener instalado NodeJS, porque Webpack necesita el runtime del mismo, porque es un paquete de Node.
  • Tener instalado NPM, que se instala automáticamente al instalar NodeJS.
  • Tener los paquetes webpack y webpack.cli.
  • Un editor de código, para poder procesar los ficheros de configuración y poder crearlos. Se puede utilizar cualquier editor, en este caso utilizaremos en este ejemplo Visual Studio Code.

Descarga de Webpack

Para realizar la instalación de Webpack, lo primero que haremos será visitar la página de NodeJS, dónde según el sistema operativo que estemos utilizando nos va a recomendar dos descargas:

  • LTS, que es la que más depurada está y la que nos recomiendan por tener una menor cantidad de bugs.
  • La última versión, que es la que está más al día, con las últimas características, con lo cual podemos encontrar más problemas.

En nuestro caso vamos a utilizar la versión LTS, que una vez descargada vamos a instalar siguiendo los pasos de instalador, lo que se realiza de una forma sencilla, tanto en macOS como en Windows.

En Linux habría que utilizar algún sistema de paquetes para instalarlo, indicando los sources de los repositorios, o bien se puede construir con source.

En este ejemplo estamos utilizando la versión 10.5.0, pero realmente da igual la versión que utilicemos, siempre que sea cualquier revisión de la versión 10 de NodeJS.

En cuanto a NPM estamos empleando la versión 6.3.0, aunque es indiferente utilizar otra diferente siempre que sea una revisión de la versión 6 de NPM.

Instalación de Webpack

Una vez comprobado que tenemos tanto NodeJS como NPM instalados en el sistema, vamos a instalar los paquetes tanto de Webpack como de Webpack CLI, lo haremos a nivel local, a nivel de proyecto, ya que es muy mala práctica instalar Webpack, y en general cualquier librería, de forma global. Hacerlo de esa forma puede generarnos problemas de compatibilidad de versiones o de compatibilidad de proyectos, y esto rompe un poco lo que viene siendo una encapsulación de un paquete NPM, es decir, que toda la información viaje con el paquete y no necesite tener cosas globales declaradas para funcionar, sino que todo esté encapsulado en su package.json.

Primero vamos a generar un proyecto de esta forma:


npm init -y

Esto nos va a generar automáticamente un package.json con la configuración por defecto. De esta forma ya tenemos un proyecto creado dónde poder a instalar los paquetes de Webpack y Webpack CLI, lo que hacemos así:


npm install webpack webpack-cli --save-dev

De esta forma lo que hacemos es guardar esta dependencia como una dependencia de desarrollo, de tal forma que si movemos este proyecto a un entorno de integración continua o a un entorno de producción, estas dependencias, cómo van a ser dependencias que solo vamos a utilizar para construir nuestra aplicación, no se van a descargar en sistemas de producción.

Durante la instalación, que según la conexión a Internet que tengamos irá más o menos rápido, se irá descargando todo el core dentro del paquete de Webpack, que lo vamos a utilizar para crear los archivos de configuración.

También descargará todo el contenido del paquete de Webpack CLI, que lo vamos a utilizar para jugar con la consola y para ir ejecutando una serie de comandos.

Una vez finalice la instalación nos aparecerá un resumen de la misma, dónde podemos ver que se han instalado ambos paquetes.

Para mostrar una visualización rápida del proyecto lo hacemos introduciendo el comando:


cat package.json

Podemos ver que las dependencias se han guardado en una propiedad llamada devDependencies, es decir, que son las dependencias de desarrollo, que es lo que buscábamos al utilizar el flag --save-dev en la instalación.

A partir de aquí podríamos ya comenzar a utilizar Webpack.

Si quieres aprender en profundizar sobre Webpack puedes hacer el Curso de Webpack básico en el que aprenderás qué es Webpack y cómo utilizarlo en tus proyectos.

curso-webpack-basico

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

WEBPACK: ¿QUÉ ES? [Actualizado 2019]

WEBPACK: ¿QUÉ ES? [Actualizado 2019]

Lenguajes de programación

05 de Febrero de 2019

Te contamos qué es Webpack, cómo funciona y las ventajas que nos ofrece para nuestros desarrollos.

Programador JavaScript Profesional

Programador JavaScript Profesional

carrera

Incluye 8 cursos:

  • Curso de JavaScript Profesional
  • Curso de Angular 4
  • Curso de React JS

y 5 cursos más!

Duración: 47 horas y 58 minutos

Curso de JavaScript Profesional

Curso de JavaScript Profesional

curso

Con este curso aprenderás:

  • Historia, propósito y principios básicos de JavaScript.
  • Entorno, navegadores y dispositivos
  • Runtimes, Scope, Event Loop, Garbage Collector

Duración: 9 horas y 37 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars