close

Webpack Guía para principiantes

Webpack es una herramienta muy útil en el desarrollo web moderno, que ayuda en la gestión de recursos y la optimización de proyectos. Aquí hay una guía básica para los recién llegados sobre cómo usar Webpack:

Instalar Webpack

En primer lugar, instale Node.js si aún no lo ha hecho. Luego, cree un directorio para su proyecto y abra una ventana de Terminal/Símbolo del sistema en ese directorio. Ejecute los siguientes comandos para instalar Webpack y webpack-cli(interfaz de línea de comandos de Webpack):

npm install webpack webpack-cli --save-dev

Crear Webpack configuración

Cree un archivo con el nombre webpack.config.js en la raíz del directorio de su proyecto. Aquí es donde configurará Webpack.

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

Crear carpetas y archivos

Cree una src carpeta en el directorio raíz y, dentro de ella, cree un archivo con el nombre index.js que sirva como archivo principal para su aplicación.

Correr Webpack

Abra Terminal y ejecute el siguiente comando para compilar su código fuente usando Webpack:

npx webpack

Después de ejecutar este comando, Webpack seguirá la configuración, compilará el index.js archivo y creará un archivo de salida con el nombre bundle.js en el dist directorio.

Usar en HTML

Cree un archivo HTML en el dist directorio o en su ubicación preferida y enlace al bundle.js archivo:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

Ejecute la aplicación

Abra el archivo HTML en su navegador y compruebe si su aplicación funciona.

Esta es solo una guía básica. Webpack tiene muchas características poderosas, como el manejo de CSS, la administración de módulos, el uso de cargadores y complementos, la optimización del código fuente y mucho más. Explore la documentación oficial Webpack para aprovechar al máximo las capacidades de esta herramienta.