¡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   sobre su navegador. Deberías ver esto:  index.html  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   interna. Webpack descubrirá de qué otros módulos y bibliotecas depende ese punto de entrada (   e   ). gráfico de dependencia directa 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   , el paquete web agregará ese módulo al gráfico de dependencia. Ese archivo es una dependencia   . Ahora, supongamos que dentro del archivo   tuviéramos algo como esto: estilos.css directa styles.css   @import "molules/_primary-nav.css";  El archivo       . primary-nav.css sería una dependencia   , porque   depende de   , que a su vez depende de indirecta index.css styles.css _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   también es un objeto. Configuraremos dos propiedades:   y nombre de   . de salida ruta 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   , que es una biblioteca central de   . path Node.js    : 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. NOTA  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   y agregue esta línea dentro del área de scripts: package.json   "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   . Para arreglar eso, configure el modo como "desarrollo": modo   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   dentro del archivo de configuración: devServer   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   se usa para decirle al servidor dónde buscar el archivo index.html. directorio  Cuando visite localhost: 3000 (el puerto especificado), ¡verá nuestra página!  Ahora, si va al archivo   , cambia el párrafo y lo guarda, webpack-dev-server recargará automáticamente la página y verá los cambios en su navegador. index.html  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

2022 - HackerNoon Contributor of the Year - Html

2022 - Software Developer of the Year

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Este audio es producido en el idioma original de la historia!

Configurar Webpack para trabajar con archivos estáticos

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps