Comenzando con Webpack [con ejemplo de proyecto]

Webpack es un módulo de paquete Eso facilita la construcción de aplicaciones complejas de JavaScript. Ha ganado mucha tracción desde que la comunidad React lo eligió como su principal herramienta de construcción. Webpack es ni un gestor de paquetes ni un gestor de tareas ya que utiliza un enfoque diferente (más avanzado), pero su objetivo es también configurar un proceso de construcción dinámica.

Webpack funciona con JavaScript vainilla. Puedes usarlo para agrupar los activos estáticos de una aplicación, como imágenes, fuentes, hojas de estilo, scripts en un solo archivo mientras cuidando todas las dependencias.

No necesitará Webpack para crear una aplicación o sitio web simple, por ejemplo, uno que tenga solo un JavaScript y un archivo CSS y algunas imágenes, sin embargo, puede ser un salvavidas para un Aplicación más compleja con varios activos y dependencias..

Paquete de aplicaciones web vs. corredores de tareas vs. Browserify

Entonces, ¿cómo se apila Webpack en comparación con otras herramientas de construcción como Grunt, Gulp o Browserify?

Grunt y Gulp son corredores de tareas. En su archivo de configuración, usted especificar las tareas, y el ejecutor de tareas las ejecuta. los flujo de trabajo de un corredor de tareas básicamente se ve así:

Sin embargo, Webpack es un módulo de paquete que analiza todo el proyecto, establece un árbol de dependencias, y crea un archivo JavaScript empaquetado que sirve al navegador.

Browserify está más cerca de Webpack que de los ejecutores de tareas, ya que también crea un grafo de dependencia pero solo lo hace para los módulos de JavaScript. El paquete web va un paso más allá, y no solo agrupa el código fuente sino también otros activos como imágenes, hojas de estilo, fuentes, etc..

Si quieres saber más sobre Cómo se compara Webpack con otras herramientas de compilación, Os recomiendo dos artículos:

Andrew Ray's Webpack: cuándo usar y por qué en su propio blog
La casa de Cory Browserify vs Webpack en freeCodeCamp (con ilustraciones impresionantes)

Las dos ilustraciones de arriba son de la Materiales webpack del manual Pro React., Otro recurso que vale la pena ver..

Cuatro conceptos básicos de Webpack

Webpack tiene Cuatro opciones de configuración principales llamadas “conceptos básicos” que necesitarás definir en el proceso de desarrollo:

Entrada - la punto de partida del gráfico de dependencia (uno o más archivos JavaScript).
Salida - el archivo donde quieras salida para ser empaquetado a (un archivo JavaScript).
Cargadoras - transformaciones en los activos que Convertirlos en módulos de Webpack para que puedan ser añadido a la gráfica de dependencia. Por ejemplo, css-loader Se utiliza para la importación de archivos CSS..
Complementos - Acciones personalizadas y funcionalidades. realizado en el paquete. Por ejemplo, el i18n-webpack-plugin incrusta la localización en el paquete.

Los cargadores trabajan por archivo antes de que tenga lugar la compilación. Los complementos se ejecutan en el código empaquetado., Al final del proceso de compilación..

Instalar webpack

A instalar Webpack, abra la línea de comandos, navegue a la carpeta de su proyecto y ejecute el siguiente comando:

 npm init

Si no quiere hacer la configuración usted mismo, puede hacer npm poblar el paquete.json archivo con los valores por defecto con el siguiente comando:

 npm init -y

A continuación, instale Webpack:

 npm instala webpack --save-dev

Si ha usado los valores predeterminados, así es como su paquete.json el archivo debería verse como ahora (las propiedades pueden estar en un orden diferente):

 "name": "_tests", "version": "1.0.0", "description": "," main ":" webpack.config.js "," dependencies ": " webpack ":" ^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Error: no se especificó la prueba \" && exit 1 "," palabras clave ": []," autor ":" "," licencia ":" ISC "

Crear el archivo de configuración.

Necesitas crear un webpack.config.js expediente en la carpeta raíz del proyecto. Este archivo de configuración tiene un rol central, ya que aquí es donde Definir los cuatro conceptos básicos. (puntos de entrada, salida, cargadores, plugins).

los webpack.config.js expediente tiene un objeto de configuración de qué propiedades necesita especificar. En este artículo, especificaremos las cuatro propiedades que Corresponden a los cuatro conceptos básicos. (entrada, salida, módulo, y enchufar), pero el objeto de configuración tiene otras propiedades también.

1. Crea el (los) punto (s) de entrada.

Tu puedes tener uno o más puntos de entrada. Necesitas definirlos en el entrada propiedad.

Inserte el siguiente fragmento de código en el webpack.config.js expediente. Eso especifica un punto de entrada:

 module.exports = entry: "./src/script.js";

Para especificar más de un punto de entrada puede usar ya sea la matriz o la sintaxis del objeto.

En tu carpeta de proyectos, crear un nuevo src carpeta y un script.js archivo dentro de ella. Este sera tu punto de entrada. Para propósitos de prueba, solo colocar una cadena dentro de eso. Usé el siguiente (sin embargo, también puedes usar uno más interesante):

 const greeting = "Hola. Soy un proyecto de inicio de Webpack."; document.write (saludo);

2. Definir la salida.

Tu puedes tener solo un archivo de salida. Webpack agrupa todos los activos en este archivo. Necesitas configurar el salida Propiedad de la siguiente manera:

 const path = require ("path"); module.exports = entry: "./src/script.js", resultado: filename: "bundle.js", ruta: path.resolve (__ dirname, 'dist');

los nombre del archivo propiedad define el nombre del archivo empaquetado, mientras que la camino propiedad Especifica el nombre del directorio.. El ejemplo anterior creará el /dist/bundle.js expediente.

Aunque no es obligatorio, es mejor utilizar el ruta.resolver () método cuando definas el camino propiedad, ya que asegura una resolución precisa del módulo (La ruta absoluta de la salida se crea de acuerdo con diferentes reglas en diferentes entornos, la resolución del módulo resuelve esta discrepancia). Si utiliza ruta.resolver, necesitas exigir la camino Módulo de nodo en la parte superior de la webpack.config.js expediente.

3. Añadir los cargadores.

A agregar los cargadores, necesitas definir el módulo propiedad. Abajo, agregamos el babel-loader eso te permite utilizar de forma segura las características de ECMAScript 6 en tus archivos JS:

 const path = require ("path"); module.exports = entry: "./src/script.js", resultado: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, use: loader: "babel-loader", opciones: presets: ["env"];

La configuración puede parecer difícil pero es solo copia-pegada desde Documentación del cargador Babel. La mayoría de los cargadores vienen con un archivo readme o algún tipo de documentación, por lo que (casi) siempre puede saber cómo configurarlos correctamente. Y, los documentos de Webpack también tienen una página que explica como configurar módulo.rules.

Puedes añadir tantos cargadores como necesites, Aquí está la lista completa. Tenga en cuenta que también necesita instala cada cargador con npm para hacerlos funcionar. Para el cargador de Babel, necesita instalar los paquetes de Nodo necesarios con npm:

 npm install --save-dev babel-loader babel-core babel-preset-env webpack

Si echas un vistazo a tu paquete.json archivo, verás que npm añadido tres paquetes relacionados con Babel a la Dependencias propiedad, Estos se encargarán de la compilación de ES6..

4. Añadir los complementos.

A agregar los complementos, necesitas especificar el plugins propiedad. Además, también tienes que exigir los complementos uno por uno, Como son módulos externos..

En nuestro ejemplo, agregamos dos complementos de Webpack: Complemento de HTML Webpack y el Precarga del plugin webpack. Webpack tiene un buen ecosistema de plugins, puedes navegar por la lista completa aquí.

Requerir los complementos como módulos de nodo., crear dos nuevas constantes: HtmlWebpackPlugin y PrecargaWebpackPlugin y utilizar el exigir() función.

 const path = require ("path"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", resultado: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, use: loader: "babel-loader", opciones: presets: ["env"]], plugins: [new HtmlWebpackPlugin (), nuevo PreloadWebpackPlugin ()];

Al igual que en el caso de los cargadores, también tienes que instala los plugins de Webpack con npm. Para instalar los dos complementos en el ejemplo, ejecute los siguientes dos comandos en su línea de comandos:

 npm install html-webpack-plugin --save-dev npm install --save-dev preload-webpack-plugin

Si revisas tu paquete.json archiva ahora, verás que npm añadido los dos complementos a la Dependencias propiedad.

Ejecutar Webpack

A crear el árbol de dependencias y sacar el paquete, ejecuta el siguiente comando en la línea de comando:

 webpack

Es usual toma uno o dos minutos para Webpack para construir el proyecto. Cuando termine, verá un mensaje similar en su CLI:

Si todo salió bien Webpack creo un dist carpeta en la raíz de tu proyecto y colocó los dos archivos empaquetados (bundle.js y index.html) dentro de eso.

Repositorio de github

Si desea revisar, descargar o bifurcar todo el proyecto, eche un vistazo a nuestro repositorio de Github..