22,356 lecturas

Configurar Webpack para trabajar con archivos estáticos

por Matheus Alves2021/11/26

Demasiado Largo; Para Leer

En este tutorial, le mostraré cómo puede configurar un paquete web si desea servir archivos estáticos en su aplicación. Desde la versión 4.0.0, webpack no requiere un archivo de configuración para agrupar su proyecto. Sin embargo, es increíblemente configurable para adaptarse mejor a sus necesidades. Para configurar el paquete web, necesitamos crear una configuración. archivo en la raíz del proyecto: En el. raíz de nuestro proyecto: The.config.js.

Companies Mentioned

featured image - Configurar Webpack para trabajar con archivos estáticos

¡Hola! En este tutorial, le mostraré cómo puede configurar un paquete web si desea servir archivos estáticos en su aplicación. Además, también aprenderás:

Cómo manejar archivos CSS;

Primero, creemos la estructura de nuestro proyecto:

Ahora, creemos un archivo package.json con el siguiente comando:

 npm init -y

E instalar los paquetes que necesitamos ahora:

 npm install --save-dev webpack webpack-cli webpack-dev-server

Según la documentación oficial,

Desde la versión 4.0.0, webpack no requiere un archivo de configuración para agrupar su proyecto. Sin embargo, es increíblemente configurable para adaptarse mejor a sus necesidades.

Para configurar el paquete web, debemos crear un archivo de configuración en la raíz del proyecto:

 touch webpack.config.js

Tenga en cuenta que lo hice usando la línea de comando (terminal de Ubuntu), pero puede hacerlo a través del IDE o el editor de texto de su elección. Estoy usando VS Code aquí:

Agregue este código a index.html :

 <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="assets/styles/styles.css" /> </head> <body> <div class="container"> <div class="text-contents"> <h3 class="heading">Knowledge</h3> <p class="paragraph">Update me!</p> </div> <img src="assets/images/bookshelf.png" alt="" /> </div> </body> </html>

Y esto a estilos.css :

 .container { display: grid; padding: 15px; justify-items: center; align-content: center; height: 100%; } .text-contents { position: relative; align-self: center; justify-self: center; color: #005f73; background: url("../images/freedom.png") no-repeat center; background-size: 80%; width: 400px; height: 200; } .heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .paragraph { position: absolute; top: 68%; left: 50%; transform: translate(-50%, -50%); } p, h1 { margin: 0; padding: 0; } img { max-width: 50%; }

Después de eso, puede arrastrar y soltar el archivo index.html sobre su navegador. Deberías ver esto:

Es hora de configurar el paquete web de acuerdo con nuestras necesidades. Para hacerlo, abra el archivo webpack.config.js y agregue esta línea:

 module.exports = {}

Cuando iniciemos webpack, buscará su archivo de configuración (webpack.config.js). Este archivo exportará un objeto que tiene todas las configuraciones.

La primera propiedad que necesitamos agregar a ese objeto es el punto de entrada :

 module.exports = { entry: "./app/assets/scripts/index.js", };

Un punto de entrada indica qué módulo debe usar el paquete web para comenzar a construir su gráfico de dependencia interna. Webpack descubrirá de qué otros módulos y bibliotecas depende ese punto de entrada ( directa e indirectamente ).

Para comprender mejor lo que dice la documentación, agreguemos esta línea a index.js :

 import "../styles/styles.css";

Dado que estamos importando estilos.css , el paquete web agregará ese módulo al gráfico de dependencia. Ese archivo es una dependencia directa . Ahora, supongamos que dentro del archivo styles.css tuviéramos algo como esto:

 @import "molules/_primary-nav.css";

El archivo primary-nav.css sería una dependencia indirecta , porque index.css depende de styles.css , que a su vez depende de _primary-nav.css .

Ahora, necesitamos agregar la propiedad de salida :

 const path = require("path"); module.exports = { entry: "./app/assets/scripts/index.js", output: { path: path.resolve(__dirname, "app"), filename: "bundle.js", }, };

La propiedad de salida también es un objeto. Configuraremos dos propiedades: ruta y nombre de archivo .

La primera propiedad especifica dónde debe emitirse el paquete y la segunda es el nombre del archivo incluido. Dado que se requiere una ruta absoluta, tuvimos que solicitar path , que es una biblioteca central de Node.js .

NOTA : aunque especificamos dónde debe emitirse el paquete, webpack no lo escribe en el disco a menos que lo indiquemos. De hecho, mantiene el paquete en la memoria para que funcione más rápido.

En este momento podemos iniciar webpack-dev-server sin ninguna configuración. Dará como resultado algunos errores que abordaremos pronto. Para hacer eso, abra el archivo package.json y agregue esta línea dentro del área de scripts:

 "dev": "webpack serve"

Después de eso, abra la terminal VS Code (Ctrl + j) y escriba:

 npm run dev

Presione Enter/Return y espere. El servidor no se detendrá hasta que usted lo indique y el paquete web intentará agrupar y servir los contenidos en localhost: 8080, de forma predeterminada.

Dado que nuestra configuración está incompleta, si visita esa dirección, debería ver este mensaje: "Cannot GET /".

Debería ver lo siguiente en la terminal de VS Code:

Webpack advierte que no hemos configurado la opción de modo . Para arreglar eso, configure el modo como "desarrollo":

 const path = require("path"); module.exports = { entry: "./app/assets/scripts/index.js", output: { path: path.resolve(__dirname, "app"), filename: "bundle.js", }, mode: "development" };

Detenga el servidor (Ctrl + c), guarde el archivo y vuelva a iniciarlo.

Esto es lo que obtenemos ahora:

Lo arreglaremos en la siguiente sección. Si lo necesitas, tómate un descanso, tómate un café y vuelve.

Manejo de archivos CSS

¿Listo? ¡Vamos a codificar!

Fuera de la caja, webpack solo entiende archivos .js. Es por eso que necesitamos instalar algunos cargadores para que funcione con CSS. El archivo de configuración debe actualizarse con el objeto del módulo :

 const path = require("path"); module.exports = { entry: "./app/assets/scripts/index.js", output: { path: path.resolve(__dirname, "app"), filename: "bundle.js", }, mode: "development", module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, ], }, };

No olvides instalar esos paquetes ejecutando esto:

 npm install --save-dev style-loader css-loader

Detenga y vuelva a iniciar el servidor. Esto es lo que deberías ver en la terminal:

La configuración del servidor de desarrollo

Antes de configurar webpack-dev-server, agregue esta línea dentro de index.html :

 <script src="./bundle.js"></script>

Debe colocarlo justo encima de la etiqueta de cierre </body>.

Luego, agregue el objeto devServer dentro del archivo de configuración:

 const path = require("path"); module.exports = { entry: "./app/assets/scripts/index.js", output: { path: path.resolve(__dirname, "app"), filename: "bundle.js", }, mode: "development", module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, ], }, devServer: { port: 3000, static: { directory: path.join(__dirname, "app"), }, }, };

La propiedad del directorio se usa para decirle al servidor dónde buscar el archivo index.html.

Cuando visite localhost: 3000 (el puerto especificado), ¡verá nuestra página!

Ahora, si va al archivo index.html , cambia el párrafo y lo guarda, webpack-dev-server recargará automáticamente la página y verá los cambios en su navegador.

Como prueba, cambie el párrafo a lo siguiente:

 <p class="paragraph"> = freedom</p>

Como dije, tan pronto como presione Ctrl + s, verá que la página se actualiza automáticamente. A continuación se muestra el resultado final:

Intenta cambiar los estilos y verás cómo sucede la magia.

Espero que este tutorial te haya sido útil. ¡Gracias por leer! Puede encontrar el código fuente de este proyecto en este repositorio: https://github.com/matheus4lves/serve-static-files .