Introducci贸n

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:

  • Entry: Indica cu谩l es el punto(s) de entrada.
  • Output: Indica cu谩l es el punto(s) de salida.
  • Loaders: Realizan transformaciones en los archivos.
  • Plugins: Realizan acciones en los archivos.

Aprende m谩s sobre Webpack:

馃敿 Regresar


Sin configuraci贸n

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.

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 馃槺馃槺馃槺

馃敿 Regresar


Modos

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.

Desde la versi贸n 4 se introdujo 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 --entry ./foo/src/index.js --output-path ./foo/dist",
  "build": "webpack --mode production --entry ./foo/src/index.js --output-path ./foo/dist"
}

馃敿 Regresar


Transpilando JS con Babel

Webpack por s铆 s贸lo no sabe como transpilar c贸digo ESNext, 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": ["@babel/preset-env"]
}

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

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

codeESNext();

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/i,
        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 ESNext a ES5 indentado y con comentarios, gracias a la configuraci贸n del archivo webpack.config.js.
  • npm run build transpil贸 el archivo con sintaxis ESNext a ES5 minificado y sin comentarios, gracias a la configuraci贸n del archivo webpack.config.js.

馃敿 Regresar


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$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/i,
        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 馃槑.

馃敿 Regresar


Extracci贸n de CSS

Webpack por s铆 s贸lo no sabe como extraer c贸digo CSS en un archivo externo, 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$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/i,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
    }),
    new MiniCssExtractPlugin(),
  ],
};

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

html {
  box-sizing: border-box;
  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 馃槑.

馃敿 Regresar


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 serve  --mode development --open --port 3000"
}

Al ejecutarlo, Webpack abrir谩 la aplicaci贸n en una ventana del navegador.

npm start

馃敿 Regresar


Aprende m谩s

Ve mi Curso

馃敿 Regresar