52

Tutorial de Webpack: Qué es y cómo usarlo en proyectos JavaScript

25113Puntos

hace 3 años

Curso de Webpack 2017
Curso de Webpack 2017

Curso de Webpack 2017

Webpack es una tecnología que nos ayuda a empaquetar JavaScript y todos los assets de cualquier tipo, convirtiéndolos en algo que el navegador pueda interpretar. En este curso aprenderás, utilizando esta herramienta, a mejorar tu experiencia como desarrollador teniendo un código mucho más legible, organizado y sencillo de trabajar.

Webpack es un Module Bundler for modern JavaScript applications, es decir, un empaquetador de módulos para aplicaciones modernas hechas en JavaScript. Hace poco terminamos de grabar el curso de Webpack en donde aprenderás a dominarlo por completo. Hoy te enseñaré cómo usarlo en tus proyectos.

Una aplicación web lleva múltiples tipos de assets como imágenes, fuentes personalizadas, JSON, CSS, JavaScript, etc. y manejar esto se vuelve un dolor de cabeza a medida que nuestra aplicación tiene éxito y va creciendo. Todo esto lo resuelve Webpack y es por eso que será nuestro empaquetador de módulos (o Module Mundler) ya que para él, todos estos archivos serán tratados de esta manera:

Captura de pantalla 2017-11-02 a la(s) 5.44.19 p.m..png

¿Por qué es importante aprender Webpack?

Tener una aplicación organizada va a ayudarte a ti y a tu equipo, a llevar un correcto manejo de versiones de tu código. También necesitarás organizar carpetas llenas de archivos en toda clase de extensiones y separar las que se usan en entornos de desarrollo, como las que se usarán en producción. Esto lo hace Webpack de manera fácil, solo debes decirle dónde está el archivo fuente y a dónde quieres enviar el o los archivos resultantes.

Developer experience

Hoy en día es muy difícil pensar en iniciar una aplicación sin primero plantearnos un Stack de tecnología para crearlo. Empiezan a sonar cosas como Angular, React, Vue para manejar nuestros componentes y PostCSS, Sass, Stylus o Less para manejar nuestros estilos. Todo esto lleva un mundo detrás de código que el navegador no entiende de buenas a primeras porque seguro escribirás código en Typescript, templates en jsx o simplemente usar todo los nuevos features de EcmaScript2017. Con Webpack no tendrás que sacrificar tu comodidad a la hora de escribir código.

Loaders

Estos son los encargados de cargar archivos de cualquier extensión, darles el debido tratamiento y convertirlos en formatos que el navegador entienda. Por ejemplo: podemos usar babel para escribir código JavaScript, usando funciones asíncronas o cualquier feature que aún no soporte tu navegador, y este lo convertirá en un código más feo pero que funcione en el navegador.

Plugins

Aquí puedes extender las habilidades de Webpack para lo que quieras. Por ejemplo, para comprimir tus imágenes sin utilizar nuestro programa de diseño, o a mano desde algún servicio web, cada que se agregan imágenes nuevas al proyecto, solo debes configurar el plugin correcto y listo.

Escribamos nuestra primera aplicación usando Webpack

webpack.config.js

module.exports = {
  entry: {
    home: './home.js',
  },
  output: {
    filename: 'dist/js/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['es2017'],
        }
      }
    ]
  }
}

Aquí le decimos a Webpack que lea un archivo llamado home.js y que el resultado final del archivo lo envíe a la carpeta dist/js y [name] sirve para que tome el nombre de mi entry point es decir “home”. También estamos usando babel para soportar EcmaScript 2017 y escribir JavaScript moderno sin problemas.

home.js

functiontimeout() {
  returnnewPromise((todoOk, todoMal) => {
    setTimeout(()=> {
      todoOk('han pasado 5 segundos')
    }, 5000);
  })
}

asyncfunctionwait () {
  const message = await timeout();
  document.body.innerText = message;
}

wait();

document.body.innerText = "Hola mundo!"

Esta es nuestra aplicación y tengo un código sencillo que solo imprime un Hola mundo! en pantalla. Luego de 5 segundos lo sobre escribe con han pasado 5 segundos. Lo interesante es que lleva una función asíncrona que será tratada por babel y que cualquier navegador la entienda.

index.html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Home</title><style>body {
      display: flex;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      font-size: 50px;
    }
  </style></head><body><scriptsrc="dist/js/home.js"></script></body></html>

Aquí solo estoy cargando el archivo final generado por Webapck que esta en dist/js/home.js

He utilizado Webpack, babel y ES2017 pero aún no los he instalado. Para esto vamos a crear un archivo adicional donde tendremos todo esto, que a partir de ahora se llamarán “dependencia de desarrollo”.

package.json

{
  "main": "home.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "LeonidasEsteban",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-es2017": "6.24.1",
    "webpack": "3.8.1"
  }
}

Ahora puedo ir desde mi terminal hasta el directorio de mi ejercicio y correr el comando npm install el cual instalará todo esto antes mencionado.

Para finalizar solo debemos ejecutar desde la terminal npm run build y esto nos va a generar nuestro paquete final que se carga en nuestro index.html

El ejercicio es muy sencillo pero está preparado para que puedas escribir lo que quieras en JavaScript.

Webpack puede tratar tambien con CSS, imágenes y prácticamente cualquier archivo con el loader y configuración correcta. Si quieres aprender todo esto no dudes en apuntarte en nuestro curso de Webpack.

Este curso hace parte de la carrera profesional de Desarrollo JavaScript, compuesto por 12 cursos. Si tienes alguna pregunta sobre los cursos, escríbeme a [email protected].

Curso de Webpack 2017
Curso de Webpack 2017

Curso de Webpack 2017

Webpack es una tecnología que nos ayuda a empaquetar JavaScript y todos los assets de cualquier tipo, convirtiéndolos en algo que el navegador pueda interpretar. En este curso aprenderás, utilizando esta herramienta, a mejorar tu experiencia como desarrollador teniendo un código mucho más legible, organizado y sencillo de trabajar.
Leonidas
Leonidas
@LeonidasEsteban

25113Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
1
606Puntos

sin duda algo obligatorio de aprender…

1
4533Puntos

Perfecto, ¿Quiere decir que Webpack prácticamente sirve como un traductor para los navegadores viejos?

1
152202Puntos

Muy buen post Leo, siempre he tenido pereza de aprender webpack porque me parece complicado, lo mio es Backend, pero de seguro tomaré tu curso.

1
25113Puntos
3 años

Es muy buena oportunidad de prenderlo paso a paso hasta darte cuenta que lo sabes todo y puedas agregarlo sin miedo y sin copiar pegar a tus proyectos 😊

0
10961Puntos

Hola.
¿Puede sustituir completamente webpack a gulp y grunt?
Espero el curso con impaciencia.

0
25113Puntos
3 años

En Platzi dejamos de usar gulp/gunt por webpack aunque gulp en general es un task manager que en concepto tiene otra utilizar pero para efectos prácticos que es manejar los recursos de la web no hace falta más

0
32370Puntos

Sensacional, gracias