¡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!

Demasiado Largo; Para Leer

Making security fun one episode at a time

Configurar Webpack para trabajar con archivos estáticos

Demasiado Largo; Para Leer

Companies Mentioned

Matheus Alves

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Configurar Webpack para trabajar con archivos estáticos

Demasiado Largo; Para Leer

Companies Mentioned

Matheus Alves

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS