Instalación Webpack y dependencias

Recuerdo que el repository de todo lo desarrollado podéis encontrarlo en el siguiente. Además las ramas estarán numeradas según la lección. La rama relacionada con este artículo es webpack_course_001. 

Puedes cambiar a la rama relacionada con este artículo con el comando:

git checkout webpack_course_001

Comencemos inmediatamente con este segundo artículo sobre Webpack.

Inicialización NPM e instalación Webpack

Después de haber entrado en la carpeta del proyecto, tecleo npm init -y como en la imagen de abajo:

(el flag -y responderá automáticamente Yes a todas las preguntas hechas por npm)

Una vez inicializado NPM procedamos a la instalación de webpack y de webpack-cli, indispensable para poder efectuar operaciones en línea de comando. Usaremos el flag --save-dev para usarlas como dependencias de desarrollo.

si la instalación ha tenido éxito positivo, encontraremos listados en la sección devDependecies del package.json dos paquetes, como en la siguiente imagen:

Ahora vamos a crear una carpeta src que contendrá el código fuente y un archivo index.html que mostrará los resultados. La estructura de la carpeta tendría que ser la siguiente:

• NOMBRE_PROYECTO
  • package.json
  • package-lock.json (se genera automáticamente después de una instalación npm) 
  • .gitignore (creado para no cometer dependencias y carpetas innecesarias) 
  • index.html
  • src/
    • index.js

El archivo index.js contendrá una función que crea un elemento HTML e imprime la frase en el vídeo: “Hello World”.

Para esta mini serie nuestro proyecto será completamente desarrollado con un solo script Javascript y sucesivamente Typescript, en el cual crearemos los elementos que añadiremos en el DOM.

Index.js 

El archivo index.html importará l’index.js como un script normal.

Index.html

Abriendo el archivo Index.html en el buscador podremos visualizar la frase Hello World en alto a izquierda… ¡Sin embargo en este ejemplo no he usado Webpack! Porque he creado manualmente el archivo index.html y he vinculado, siempre manualmente, el archivo que contiene las lógicas del proyecto.

Empecemos a hacer bien las cosas

Primero separamos el código fuente (src) del código de distribución (dist), que contendrá el resultado final del proyecto.

Cambiando la estructura de los archivos de esta manera: 

• NOMBRE_PROYECTO
  • package.json
  • package-lock.json 
  • .gitignore 
  • dist/
    • index.html
  • src/
    • index.js

Vamos a crear después nuestro entry point para webpack, escribiendo un comando en la sección script del package.json.

Al final cambiamos el archivo index.html, actualizando el path del script index.js. Porque después de mover index.html en la carpeta  dist tendremos un error de señalización.

dist/index.html

Ahora solo tendremos que lanzar el comando Npm run build desde la línea de comando y observar la primera magia. Webpack creará automáticamente un archivo llamado main.js y lo pondrá dentro de la carpeta  dist, ¡la misma donde está presente nuestro index.html!

Si has llegado hasta aquí… ¡enhorabuena! Has creado tu primer proyecto Webpack incluso sin gestionar una configuración particular. En las próximas lecciones entonces crearemos un archivo de configuración, que se llama webpack.config.js y trabajaremos con diferentes optimizaciones de Webpack, ¡aprovechándolo de la manera más adecuada! 

Stay tuned!

¡HASTA LA PRÓXIMA LECCIÓN!