Skip to content

Latest commit

 

History

History
109 lines (94 loc) · 7.29 KB

charpter-01.md

File metadata and controls

109 lines (94 loc) · 7.29 KB
Raw

CAPÍTULO 1: Proyecto con webpack sin configuración

CAPÍTULO 1: Antes de empezar

Si eres nuev@ en esto del desarrollo frontend usando webpack, asegúrate antes de tener nociones sólidas sobre HTML5, Javascript, JSON, ECMAScript, Node.JS y Git.

A parte deberás disponer de un entorno de desarrollo que cuente con los cliente de terminal git (git-bash si usas Windows) y npm así como también un IDE (entorno de desarrollo de software) para poder editar archivos de código de forma amigable.

Una vez dispongas de todo ello, por favor, asegúrate de tener nociones claras sobre qué es webpack y para qué sirve.

CAPÍTULO 1: Cómo crear el proyecto

  1. Crea un proyecto nuevo, aquí en github o dónde quieras, y clónalo en tu sistema ejecutando en tu terminal una instrucción git-clone

    git clone git@github.com:{propietario}/{proyecto}.git webpack-essential

  2. Accede al nuevo directorio con

    cd webpack-essential

  3. Inicializa un nuevo proyecto node con

    npm init --yes

  4. Ahora deberemos instalar las dependencias webpack y webpack-cli con

    npm install --save-dev webpack webpack-cli

    Nuestro proyecto ya está casi listo para la VERSIÓN 1.0!

  5. Crea ahora una carpeta src, puedes usar la instrucción

    mkdir ./src

  6. Ahora añade un archivo llamado index.js en la carpeta src. Puedes usar esta instrucción para crearlo rápidamente:

    touch ./src/index.js

  7. A tu fichero le podrías añadir el siguiente código escrito en javascript:

    window.addEventListener('DOMContentLoaded', (event) => {
  let h1 = document.createElement('h1');
  h1.innerHTML = 'Este es mi primer proyecto <em>webpack</em>!';
  document.body.appendChild(h1);
});

  8. Y para para terminar, deberás crear un archivo llamado index.html (usa la instrucción touch index.html si lo deseas), que contenga el siguiente código:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mi primer proyecto Webpack</title>
  <script defer src="dist/main.js"></script>
</head>
<body>

</body>
</html>

  9. Finalmente ya podemos usar webpack por primera vez. Para ello lanzaremos la siguiente instrucción:

    npx webpack

HEMOS TERMINADO!
Si echas un vistazo a tu carpeta webpack-essential encontrarás el siguiente contenido:

dist/
  main.js
index.html
node_modules/
package.json
package-lock.json
src/
  index.js

En este anterior listado de contenido de la carpeta, hemos destacado dos archivos javascript: main.js e index.js. Este último es el que habías creado en los pasos 6 y 7. Y el primero, llamado main.js, ha sido generado por webpack cuando hemos ejecutado la instrucción del paso 9.
Ahora que tienes este fichero, puedes abrir en un navegador (moderno) el archivo index.html y verás como aparece un mensaje como este:

Este es mi primer proyecto webpack!

CAPÍTULO 1: Resumen

  • Lo primero que has hecho es crear un proyecto git en un sistema de hospedaje de repositorios git, como github, gitlab, bitbucket, sourceforge u otros.
    Al crear un proyecto obtienes una dirección para clonar.

  • La instrucción git clone te permite clonar en un directorio local (en nuestro caso webpack-essential) un repositorio git que hayas hospedado en un sistema remoto (como github, gitlab, bitbucket o sourceforge). Aquí tienes un artículo en el que se te explica cómo y para qué usar esta instrucción.

  • El siguiente paso que has seguido es la creación de un archivo package.json, mediante la instrucción npm init --yes, que permitirà que trabajes con un proyecto node en tu directorio webpack-essential.
    Si quieres entender un poco mejor la herramienta npm pásate por esta página.
    También puedes leer sobre el archivo package.json en esta página y puedes leer sobre la instrucción npm init en esta otra

  • Acto seguido has instalado mediante la instrucción npm install dos dependencias clave para usar webpack: webpack y webpack-cli.
    webpack es el paquete que contiene la lógica que utiliza Webpack para empaquetar el código y los assets de tu proyecto frontend.
    webpack-cli es el paquete que contiene la herramienta que te permite interactuar con webpack mediante el comando de terminal webpack.
    Para entender un poco mejor cómo funciona la instrucción npm install, te aconsejamos visitar esta página. Y si además te interesa conocer más de cerca las dependencias que has instalado, no dudes en visitar la página del paquete webpack y también la página del paquete webpack-cli

  • En los siguientes tres pasos, has creado el archivo principal de aplicación (index.js), sobre la que se basará nuestro proyecto frontend. Es un archivo escrito en javascript que contiene algunos rasgos de ECMAScript2015 (conocido como harmony o como ES6), como en este caso una "arrow function".
    Puedes conocer más de cerca la notación arrow para funciones de javascript visitando esta página.
    El código de este archivo utiliza el evento DOMContentLoaded para inyectar en un documento html una etiqueta <h1> con un título.
    Puedes leer sobre este evento en esta página si no lo conocías.

  • A continuación, has concentrado en un único paso, la creación de un documento html que contiene una etiqueta <script> que usará el código de un archivo dist/main.js, hasta el momento desconocido. Esta etiqueta, usa además el atributo defer para que la ejecución de dicho archivo ocurra cuando se haya "parseado" el documento html.
    Si no conocías este atributo (defer), puedes leer sobre el en esta página.
    Si el término "parseado" (parsing en inglés) te suena a extraterrestre, deberías leer al respecto en páginas como esta.

  • Finalmente has ejecutado una instrucción de la herramienta npx que lanza el proceso de empaquetaje (bundling) de webpack (usando para ello la herramienta que hemos instalado con el paqueta webpack-cli).
    Este proceso crea el archivo dist/main.js a partir del contenido del archivo index.js y de sus dependencias, aunque en nuestro caso no tenga.
    Si quieres conocer la herramienta npx es aconsejable que visites esta página.