Breaking

Post Top Ad

Your Ad Spot

jueves, 30 de mayo de 2019

Una guía para principiantes de Webpack

Hoy en día, nos vemos obligados a utilizar muchas herramientas accesorias para facilitar, acelerar y optimizar nuestro flujo de trabajo de desarrollo web. Sin embargo, a menudo, estas herramientas agregan una capa adicional de complejidad a la pila. Como resultado, necesitamos utilizar tiempo y esfuerzo adicionales para aprender, entender y usar estas herramientas correctamente. Lo mismo es cierto para webpack .
Cuando se utiliza el paquete web por primera vez, puede ser difícil entender cómo funciona y cómo se debe usar. Aunque tiene buena documentación, puede ser desalentador para los principiantes y tiene una curva de aprendizaje empinada. Sin embargo, vale la pena aprender sobre el paquete web y puede ahorrar un tiempo y un esfuerzo considerables a largo plazo. En este tutorial, presentaré todos los conceptos básicos para ayudarlo a comenzar.
Nota: en este tutorial he usado webpack 4.30.
SitePoint Premium le ofrece una colección completa de libros que cubren elementos esenciales para desarrolladores como Pug, Gulp, Git y más. Únete ahora .

¿Qué es Webpack?

Como núcleo, webpack es un agrupador de módulos estáticos. En un proyecto en particular, el paquete web trata todos los archivos y activos como módulos. Bajo el capó, se basa en un gráfico de dependencia. Un gráfico de dependencia describe cómo los módulos se relacionan entre sí mediante las referencias ( requerir e importar declaraciones) entre archivos. De esta manera, el paquete web recorre estáticamente todos los módulos para construir el gráfico y lo utiliza para generar un solo paquete (o varios paquetes), un archivo JavaScript que contiene el código de todos los módulos combinados en el orden correcto. "Estáticamente" significa que, cuando webpack construye su gráfico de dependencia, no ejecuta el código fuente, sino que une los módulos y sus dependencias en un paquete. Esto puede ser incluido en sus archivos HTML.
Ahora, para expandir la descripción general anterior, exploremos los conceptos principales que utiliza webpack.

Conceptos Principales de Webpack

El paquete web tiene algunos conceptos principales que debemos entender claramente antes de profundizar en su implementación práctica. Vamos a examinarlos uno por uno:
  • Entrada. El punto de entrada es el módulo, que utiliza webpack para comenzar a construir su gráfico de dependencia interno. A partir de ahí, determina de qué otros módulos y bibliotecas depende el punto de entrada (directa e indirectamente) y los incluye en el gráfico hasta que no quede ninguna dependencia. De forma predeterminada, la propiedad de entrada está establecida en , pero podemos especificar un módulo diferente (o incluso varios módulos) en el archivo de configuración del paquete web../src/index.js
  • Salida. La propiedad de salida le indica al paquete web dónde debe emitir el paquete (s) y qué nombre usar para ese archivo (s). El valor predeterminado para esta propiedad es para el paquete principal y para otros archivos generados, como imágenes, por ejemplo. Por supuesto, podemos especificar diferentes valores en la configuración dependiendo de nuestras necesidades../dist/main.js./dist
  • Los cargadores De forma predeterminada, el paquete web solo entiende los archivos JavaScript y JSON. Para procesar otros tipos de archivos y convertirlos en módulos válidos, el paquete web utiliza cargadores. Los cargadores transforman el código fuente de los módulos que no son JavaScript, lo que nos permite preprocesar esos archivos antes de agregarlos al gráfico de dependencia. Por ejemplo, un cargador puede transformar archivos de un lenguaje CoffeeScript a JavaScript o imágenes en línea a URL de datos. Con los cargadores incluso podemos importar archivos CSS directamente desde nuestros módulos de JavaScript.
  • Plugins Los complementos se utilizan para cualquier otra tarea que los cargadores no puedan hacer. Nos proporcionan una amplia gama de soluciones sobre gestión de activos, minimización y optimización de paquetes, etc.
  • Modo. Por lo general, cuando desarrollamos nuestra aplicación, trabajamos con dos tipos de código fuente: uno para la compilación de desarrollo y otro para la compilación de producción. Webpack nos permite establecer cuál queremos que sea producido cambiando el parámetro de modo a desarrollo , producción o ninguno . Esto permite que el paquete web use optimizaciones integradas correspondientes a cada entorno. El valor predeterminado es la producción . El modo ninguno significa que no se utilizarán las opciones de optimización predeterminadas. Para obtener más información sobre las opciones que utiliza el paquete web en el modo de desarrollo y producción , visite la página de configuración de modo .

Cómo funciona Webpack

En esta sección examinaremos cómo funciona el webpack. Incluso un proyecto simple contiene archivos HTML, CSS y JavaScript. Además, puede contener recursos como fuentes, imágenes, etc. Por lo tanto, un flujo de trabajo de paquete web típico incluiría la configuración de un archivo con los enlaces CSS y JS apropiados, y los activos necesarios. Además, si tiene muchos módulos CSS y JS que dependen unos de otros, deben optimizarse y combinarse adecuadamente en una unidad lista para la producción.index.html
Para hacer todo esto, webpack se basa en la configuración. Aunque webpack 4 viene con valores predeterminados razonables, para cualquier proyecto no trivial deberá proporcionar un archivo de configuración especial , que describa cómo se deben transformar los archivos y los activos y qué tipo de salida se debe generar. Este archivo puede convertirse rápidamente en bastante monolítico, lo que dificulta entender cómo funciona webpack a menos que conozca los conceptos principales de su funcionamiento. webpack.config.js

En función de la configuración provista, el paquete web comienza desde los puntos de entrada y resuelve cada módulo que encuentra mientras construye el gráfico de dependencia. Si un módulo contiene dependencias, el proceso se realiza de forma recursiva contra cada dependencia hasta que se complete el recorrido. Luego, el paquete web agrupa todos los módulos del proyecto en una pequeña cantidad de paquetes, generalmente uno solo, que debe cargar el navegador.

Empezando

Nota: puede encontrar los archivos de nuestro proyecto en el repositorio de GitHub .
Ahora que tenemos una base teórica sólida, implementémosla en la práctica.
Para empezar, crearemos un nuevo directorio y cambiaremos a él. Luego inicializaremos un nuevo proyecto:
mkdir learn-webpack
cd learn-webpack
npm init -y
A continuación, necesitamos instalar el paquete web y el paquete web CLI localmente:
npm install webpack webpack-cli --save-dev
Ahora, el contenido del generado debe ser similar al siguiente:package.json
{
  "name": "learn_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }
}
Además de agrupar módulos, el paquete web se puede utilizar como un simple ejecutor de tareas. Podemos crear tareas de paquetes web incluyendo el nombre de nuestra tarea seguido de sus instrucciones en la scriptssección del archivo. Probemos esto ahora. Abra y cambie el objeto a lo siguiente:package,jsonpackage.jsonscripts
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},
Dentro de la scriptspropiedad, el paquete web nos permite hacer referencia a los paquetes npm instalados localmente por sus nombres. Usamos eso y la --modebandera para definir devbuildtareas, que ejecutarán webpack en modo de desarrollo ( npm run dev) y producción ( npm run build) respectivamente.
Antes de probar las tareas que acabamos de crear, creemos un srcdirectorio y coloquemos un archivo para que contenga Ahora ya podemos ejecutar la tarea para iniciar el webpack en modo de desarrollo:index.jsconsole.log("Hello webpack");dev
$ npm run dev

> learn_webpack@1.0.0 dev C:\Users\User\Webpack\learn_webpack
> webpack --mode development

Hash: 5bb3bdc1efd7b7f4b627
Version: webpack 4.30.0
Time: 226ms
Built at: 2019-04-16 17:48:32
  Asset     Size  Chunks             Chunk Names
main.js  3.8 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 27 bytes {main} [built]
¡Genial! Funciona como se esperaba. Pero para verificar que obtenemos la salida correcta, necesitamos mostrar el resultado en el navegador. Para hacer eso, vamos a crear un archivo en el directorio:index.htmldist
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
Ahora, si abrimos el archivo en el navegador, deberíamos ver el mensaje Hello webpack en la consola.
Hasta ahora tan bueno. Pero escribir nuestro archivo manualmente puede ser problemático en algunos casos. Por ejemplo, si cambiamos el nombre de nuestro punto de entrada, se cambiará el nombre del paquete generado, pero nuestro archivo seguirá haciendo referencia al nombre anterior. Por lo tanto, tendremos que actualizar nuestro archivo HTML manualmente cada vez que cambiemos el nombre de un punto de entrada o agreguemos uno nuevo. Afortunadamente, podemos arreglar eso fácilmente con el Vamos a instalarlo ahora:index.htmlindex.htmlhtml-webpack-plugin
npm install html-webpack-plugin --save-dev
En este punto, para activar el complemento, necesitamos crear un archivo en el directorio raíz con el siguiente contenido:webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Output",
    }),
  ],
};
Como puede ver, para activar un complemento de paquete web, debemos incluirlo y luego agregarlo a la pluginsmatriz. Si es necesario, también pasamos opciones al complemento.
Ejecutemos nuestra compilación ahora para ver qué sucederá:
$ npm run build

> learn_webpack@1.0.0 build C:\Users\User\Webpack\learn_webpack
> webpack --mode production

Hash: e56a796f5ccfebcc8270
Version: webpack 4.30.0
Time: 1088ms
Built at: 2019-04-16 20:44:47
    Asset       Size  Chunks             Chunk Names
index.html  183 bytes          [emitted]
  main.js  956 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 27 bytes {0} [built]
Child html-webpack-plugin for "index.html":
    1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
Vamos a abrir el Como podemos ver, el complemento crea automáticamente un archivo actualizado para nosotros que utiliza la opción de título de la configuración:index.htmlindex.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack Output</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>
</html>
Ahora expandamos nuestro proyecto y especifiquemos nombres personalizados para las propiedades entryoutputEn añadimos lo siguiente antes de la propiedad:webpack.config.jsplugins
entry: './src/app.js',
output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist')
},
Ahora, vamos a crear un archivo:src/component.js
export default (text = "Hello webpack") => {
  const element = document.createElement("p");

  element.innerHTML = text;

  return element;
};
A continuación, cambiamos el nombre para reflejar nuestros cambios e intercambiamos su contenido con lo siguiente:index.jsapp.js
import component from "./component";

document.body.appendChild(component());
Ahora, vamos a ejecutar webpack en modo de producción:
$ npm run build

> learn_webpack@1.0.0 build C:\Users\User\Webpack\learn_webpack
> webpack --mode production

Hash: 9f78936f8a2a21061f0b
Version: webpack 4.30.0
Time: 1689ms
Built at: 2019-04-17 23:43:40
        Asset       Size  Chunks             Chunk Names
    index.html  190 bytes          [emitted]
main.bundle.js   1.04 KiB       0  [emitted]  main
Entrypoint main = main.bundle.js
[0] ./src/app.js + 1 modules 227 bytes {0} [built]
    | ./src/app.js 79 bytes [built]
    | ./src/component.js 148 bytes [built]
Child html-webpack-plugin for "index.html":
    1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
Examinemos y clarifiquemos la información de la salida del paquete web. A partir de la parte superior, vemos el hash de la compilación, la versión del paquete web y el tiempo que llevó ejecutar la compilación. A continuación, vemos los archivos generados en el distdirectorio ( ). Debajo de ellos, vemos el módulo de entrada ( ) y su dependencia ( ). La salida posterior está relacionada con el trabajo interno del y podemos ignorarlo de forma segura.index.htmlmain.bundle.jsapp.jscomponent.jsChild html-webpack-plugin for "index.html":html-webpack-plugin
Así que ahora, en la distcarpeta, tenemos el archivo de paquete recién generado Si abrimos en el navegador, deberíamos ver Hello webpack que se muestra en la página. Además, si verificamos la fuente de , veremos que el valor de la propiedad en la etiqueta se actualiza a .main.bundle.jsindex.htmlindex.htmlsrcscriptmain.bundle.js

Trabajando con Scripts

En esta sección, descubriremos cómo se puede transpilar ES6 a un código compatible con ES5 que funciona en todos los navegadores. Comencemos ejecutando el siguiente comando:
npm run dev -- --devtools false
A continuación, vamos a abrir :main.bundle.js
/***/ "./src/component.js":
/*!**************************!*\
  !*** ./src/component.js ***!
  \**************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ((text = "Hello webpack") => {
  const element = document.createElement("p");

  element.innerHTML = text;

  return element;
});

/***/ })
Como puede ver, las características modernas de ES6 (la función de flecha y la constdeclaración) del módulo no se transforman a código compatible con ES5 de forma predeterminada. Para hacer que nuestro código funcione en navegadores más antiguos, debemos agregar el cargador de Babel:component.js
npm install babel-loader @babel/core @babel/preset-env --save-dev
Luego, en agregar después de la propiedad:webpack.config.jsmoduleoutput

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
},
Cuando definimos reglas para un cargador de paquetes web, generalmente hay tres propiedades principales que debemos definir:
  • test, que describe qué tipo de archivos deben ser transformados.
  • exclude, que define los archivos que no deben procesarse desde el (los) cargador (es), si los tenemos.
  • use, que indica qué cargador (es) se debe usar contra los módulos coincidentes.
Ejecute el siguiente comando de nuevo:
npm run dev -- --devtools false
Esta vez, se compila el código en :main.bundle.js
/***/ "./src/component.js":
/*!**************************!*\
  !*** ./src/component.js ***!
  \**************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (function () {
  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "Hello webpack";
  var element = document.createElement("p");
  element.innerHTML = text;
  return element;
});

/***/ })
Perfecto. Ahora podemos usar las características modernas de JS, y el paquete web transformará nuestro código para que pueda ser ejecutado por navegadores más antiguos.

Trabajando con estilos

En esta sección, veremos cómo podemos agregar algunos estilos a nuestro proyecto. Para hacer esto, necesitamos instalar dos cargadores:
npm install css-loader style-loader --save-dev
css-loaderanaliza el CSS en JavaScript y resuelve las dependencias, genera nuestro CSS en una etiqueta en el documento HTML.style-loader<style>
Agreguemos la configuración necesaria en :webpack.config.js
{
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
Aquí, el orden de los cargadores es importante. Se evalúan en orden inverso, es decir, de derecha a izquierda y de abajo a arriba.
Ahora, vamos a crear un archivo :src/style.css
p {
  color: red;
}
Luego lo importamos a :app.js
import './style.css'
Cuando ejecutamos webpack y luego abrimos el , deberíamos ver el mensaje Hello webpack en rojo.index.html

Gestión de activos

La mayoría de las veces, su proyecto contendrá activos como imágenes, fuentes, etc. Aquí vamos a explorar un ejemplo con imágenes. Primero, necesitaremos instalar un cargador de archivos:
npm install file-loader --save-dev
A continuación, agregaremos una nueva regla en el :webpack.config.js

{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'file-loader'
    },
  ],
},
Ahora, para probar el cargador crearemos un archivo, en el directorio, con el siguiente contenido:image-component.jssrc
import image from "./image.png"

const img = document.createElement("img")
img.src = image
document.body.appendChild(img)
Aquí, importamos nuestra imagen como módulo y la usamos para crear una etiqueta. Necesitamos poner esa imagen en el directorio.<img/>src
Lo siguiente es importar nuestro componente de imagen en :app.js
import './image-component'
Y voilá. Ahora, cuando ejecutamos el webpack y abrimos la página, deberíamos ver la imagen sobre el mensaje Hola webpack .

Acelerar el proceso de desarrollo con webpack-dev-server

Actualmente, necesitamos reconstruir nuestro código cada vez que hacemos un cambio. Afortunadamente, el paquete web ofrece un servidor web de recarga en vivo que automáticamente construye y actualiza la página. Para instalarlo:
npm install webpack-dev-server --save-dev
Necesitamos actualizar nuestro devscript, en , para usar el servidor:package.json
"dev": "webpack-dev-server --mode development"
Ahora configuremos el servidor agregando la siguiente propiedad:webpack.config.js
devServer: {
  contentBase: './dist',
  open: true
},
Esto le indica que sirva los archivos del directorio y que abra la página de entrada automáticamente.webpack-dev-serverdist
Ahora, si ejecutamos webpack ( npm run dev), deberíamos ver cómo la página se abre automáticamente en el navegador en :localhost:8080
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from ./dist
Si ahora cambiamos cualquiera de los archivos de origen y los guardamos, el servidor web volverá a cargar la página automáticamente una vez que se haya compilado el código. Intente cambiar la propiedad de color en nuestro archivo CSS a verde, por ejemplo, y debería ver cómo el color se actualiza adecuadamente en la página.

Limpiar la salida

A medida que avanza nuestro proyecto, la distcarpeta puede volverse bastante desordenada. En cada compilación, el paquete web generará los paquetes y los colocará en la distcarpeta, pero no hace un seguimiento de los archivos que el proyecto está utilizando realmente. Por lo tanto, es una buena práctica limpiar la distcarpeta antes de cada compilación, para que solo se generen los archivos en uso. Para hacer esto, necesitamos instalar y configurar el :clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
En :webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');

...

plugins: [
  ...
  new CleanWebpackPlugin()
],
Ahora, ejecute webpack ( npm run build) e inspeccione la distcarpeta. Ahora solo debería ver los archivos generados a partir de la compilación sin los archivos antiguos y no utilizados. En nuestro caso, el archivo que se debe eliminar es .main.js

Conclusión

Webpack es una herramienta útil y poderosa. Este tutorial presenta solo los conceptos básicos, pero el paquete web ofrece muchas más funciones, complementos y diferentes técnicas para aplicarlos, que puede adoptar a medida que su conocimiento crezca. Aquí hay una lista de recursos que sugiero para una mayor exploración de las capacidades del paquete web:
  • Documentación oficial del webpack . La documentación le ofrece información estructurada sobre los principales conceptos y configuración de webpack; plugins y cargadores que puedes usar en tu proyecto; Guías básicas y referencias API.
  • Webpack: Del aprendiz al maestro . Un manual completo que profundiza en cada aspecto del paquete web. Escrito por Juho Vepsäläinen, un desarrollador central de webpack.
  • Un cuento de webpack 4 y cómo configurarlo finalmente de la manera correcta . Un tutorial detallado con soluciones a los problemas más comunes que puede encontrar al trabajar con webpack.
  • Tutorial de Webpack 4: de 0 Conf al modo de producción . Un buen tutorial introductorio con ejemplos para React y Vue.
  • Configurando webpack desde cero para Tailwind CSS con React . Un tutorial que explora cómo configurar un paquete web para usar con React y Tailwind CSS.
  • Cómo usar webpack con React: un tutorial en profundidad . Un tutorial avanzado sobre el uso de Webpack con React.
  • Webpack: Los conceptos básicos . Un gran curso de video introductorio por Sean Larkin, uno de los mantenedores del paquete web.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas