Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Introducción a Webpack 4

Webpack es un empaquetador de archivos para aplicaciones JavaScript usado por las principales tecnologías como React, Angular y Vue.

Introducción a Webpack 4

Hola gente de EDteam, soy su amigo y docente digital Jonathan MirCha, y en este artículo quiero hablarles de Webpack.

¿Qué es Webpack?

Es un empaquetador de archivos para aplicaciones JavaScript modernas, totalmente configurable y a diferencia de los Task Runners (como Grunt y Gulp) donde los procesos se gestionan de forma separada, en webpack, se conoce el origen y todo se compila en un único archivo.

Crea una gráfica de todas las dependencias de la aplicación. Tiene un archivo de configuración, denominado webpack.config.js, donde se define todo el proceso de construcción en un objeto JS.

Webpack tiene 4 conceptos clave:

  1. Entry: Indica cuál es el punto(s) de entrada.
  2. Output: Indica cuál es el punto(s) de salida.
  3. Loaders: Realizan transformaciones en los archivos.
  4. Plugins: Realizan acciones en los archivos.

Aprende más sobre webpack:

Sin archivo de configuración

Desde la versión 4 una de las cosas en las que se han esforzado los desarrolladores de webpack, es facilitarnos el proceso de configuración de la herramienta e incluso desde esta versión ya puedes comenzar a trabajar sin un archivo de configuración, sigue estos sencillos pasos:

Crea un nuevo directorio y colócate en el:

mkdir webpack-starter-kit && cd webpack-starter-kit

Inicia un proyecto Node:

npm init

Instala webpack y su cli:

npm i -D webpack webpack-cli

En el package.json agrega el siguiente comando:

"scripts" : {
  "build" : "webpack"
}

Ejecuta el comando:

npm run build

El comando arrojará un error:

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-starter-kit'

Webpack está buscando un punto de entrada en ./src 😱😱😱¡¡¡ Sin Archivo de configuración !!!

A partir de la versión 4 no es necesario definir el punto de entrada, tomará ./src/index.js como valor predeterminado 🤓.

En versiones anteriores, el punto de entrada debe definirse dentro del archivo de configuración denominado webpack.config.js.

Sigamos con nuestro ejemplo:

Crea el archivo ./src/index.js y escribe:

console.log('Hola mundo sin configuración con Webpack')

Ejecuta nuevamente el comando build y webpack en automático nos habrá generado el archivo de salida ./dist/main,js 😱😱😱

Modo de producción y desarrollo

En webpack un patrón común es tener 2 archivos de configuración uno para las tareas de desarrollo y otro para las de producción.

Mientras que para proyectos grandes aún se pueden necesitar 2 archivos, en proyectos pequeños , es posible especificar el tipo de configuración en una sola línea de configuración.

Webpack 4 introduce el modo de producción y el modo de desarrollo.

De hecho cuando corrimos el comando build la terminal nos mando un mensaje de advertencia:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

La opción 'modo' no se ha configurado. Establezca la opción 'modo' en 'desarrollo' o 'producción' para habilitar los valores predeterminados para este entorno.

Vamos a crear un comando para cada ambiente:

"scripts" : {
  "dev" : "webpack --mode development" ,
  "build" : "webpack --mode production"
}

Ejecutemos ambos comandos y miremos el archivo ./dist/main.js después de ejecutarlos:

  • npm run dev generará un archivo indentado y con comentarios.
  • npm run build generará un archivo minificado y sin comentarios.

Modificando puntos de entrada y salida predeterminados:

"scripts": {
  "dev": "webpack --mode development ./foo/src/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/index.js --output ./foo/main.js"
}

Transpilando Javascript ES6 con Babel

Webpack por sí sólo no sabe como transpilar código ES6, pero tiene un loader que lo hace.

Instala babel-loader y sus dependencias:

npm i -D babel-loader babel-core babel-preset-env

Ahora crea el archivo .babelrc con el siguiente código:

{
  "presets": [
    "env"
  ]
}

En este punto tenemos 2 opciones para configurar babel-loader:

  1. Sin archivo de configuración.
  2. Con archivo de configuración.

Escribe el siguiente código en tu archivo ./src/index.js

const arr = [1, 2, 3],
  codeES6 = () => console.log(...arr)

window.codeES6 = codeES6

window.codeES6()

Sin archivo de configuración

Se agrega la opción --module-bind con el valor js=babel.loader:

"scripts": {
    "dev-babel": "webpack --mode development --module-bind js=babel-loader",
    "build-babel": "webpack --mode production --module-bind js=babel-loader"
  }

Ejecutemos ambos comandos y miremos el archivo ./dist/main.js después de ejecutarlos:

  • npm run dev-babel transpiló el archivo con sintaxis ES6 a ES5 indentado y con comentarios.
  • npm run build-babel transpiló el archivo con sintaxis ES6 a ES5 minificado y sin comentarios.

Con archivo de configuración.

Crea el archivo webpack.config.js y escribe el siguiente código:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

Ejecutemos los comandos dev y build y miremos el archivo ./dist/main.js después de ejecutarlos:

  • npm run dev transpiló el archivo con sintaxis ES6 a ES5 indentado y con comentarios, gracias a la configuración del archivo webpack.config.js.
  • npm run build transpiló el archivo con sintaxis ES6 a ES5 minificado y sin comentarios, gracias a la configuración del archivo webpack.config.js.

Inyección de JS en HTML

Para inyectar el código dinámico que genera webpack en los archivos HTML, necesita 2 dependencias : html-webpack-plugin y html-loader.

Instala las dependencias:

npm i -D html-webpack-plugin html-loader

Agrega la siguiente regla al archivo webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};

Ahora crea el archivo ./src/index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Ejecutemos los comandos dev o build y miremos el archivo ./dist/index.html después de ejecutarlos.

No es necesario incluir el JavaScript dentro del archivo HTML, webpack lo ha inyectado automáticamente y ha minificado el código 😎.

Extracción de CSS

Webpack por sí sólo no sabe como extraer código CSS en un archivo externp, pero tiene un loader y un plugin que lo hace.

Instala las dependencias:

npm i -D mini-css-extract-plugin css-loader

Agrega la siguiente regla al archivo webpack.config.js:

const HtmlWebPackPlugin = require('html-webpack-plugin'),
  MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

Ahora crea el archivo ./src/style.css con algo de código:

html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #8DD6F9;
  background-color: #2B3A42;
}

Ahora importamos los estilos desde el punto de entrada, el archivo ./src/index.js:

import style from './style.css'

Ejecutemos los comandos dev o build y miremos el archivo ./dist/index.html después de ejecutarlos.

No es necesario incluir el CSS dentro del archivo HTML, webpack lo ha inyectado automáticamente y ha creado el archivo de estilos main.css 😎.

Servidor Web de Desarrollo

No es muy óptimo estar ejecutando el comando dev cada vez que hacemos un cambio en nuestra aplicación lo ideal es configurar un servidor web de prueba que en automático recompile nuestro código y recargue el navegador.

Webpack, cuenta con su propio servido de desarrollo.

Instala la dependencia:

npm i -D webpack-dev-server

Agregamos el comando start a nuestro package.json:

"scripts": {
  "start": "webpack-dev-server --mode development --open"
}

Al ejecutarlo, webpack abrirá la aplicación en una ventana del navegador.
npm start

Como verás ahora es mucho más facil comenzar a desarrollar aplicaciones con flujos de trabajo modernos y herramientas como webpack, recuerda que en EDteam tenemos un curso sobre esta herramienta y otro donde desarrollamos un proyecto 100% práctico, ambos cursos forman parte de una gran especialidad en Frontend que tenemos en EDteam, a continuación te dejo los enlaces de los cursos:

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana. Bye.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal