{"id":23201331,"url":"https://github.com/rearalf/practicewebpack","last_synced_at":"2026-04-15T16:02:49.801Z","repository":{"id":120776636,"uuid":"304781579","full_name":"rearalf/practicewebpack","owner":"rearalf","description":"Practicando Webpack","archived":false,"fork":false,"pushed_at":"2020-10-20T03:27:18.000Z","size":187,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T09:30:19.554Z","etag":null,"topics":["react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rearalf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-17T02:31:43.000Z","updated_at":"2020-10-20T03:27:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"60eb1157-5255-43c4-b8d6-2d3c945326f3","html_url":"https://github.com/rearalf/practicewebpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rearalf/practicewebpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rearalf%2Fpracticewebpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rearalf%2Fpracticewebpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rearalf%2Fpracticewebpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rearalf%2Fpracticewebpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rearalf","download_url":"https://codeload.github.com/rearalf/practicewebpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rearalf%2Fpracticewebpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263210734,"owners_count":23431191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","webpack"],"created_at":"2024-12-18T15:14:52.234Z","updated_at":"2026-04-15T16:02:49.728Z","avatar_url":"https://github.com/rearalf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  \u003cimg width=\"50\" align=center src=https://www.vectorlogo.zone/logos/js_webpack/js_webpack-icon.svg /\u003e Webpack\n\nEstos son mis apuntes de como yo voy aprendiendo **Webpack** con ayuda de su documentación y tutórales que encuentro en internet.\n\n## :grey_question:¿Qué es Webpack? \n\nEs un empaquetador de módulos o conjunto de reglas para aplicaciones modernas en JS, es una utopía en donde el producto es bueno, barato y rápido ya que nos ayuda a administrar nuestros archivos de manera eficiente para futuras modificaciones, ya que nos hace fácil de manipular dichos archivos. \n\n## :heavy_check_mark: Webpack nos ayuda a \n\n* Escribir aplicaciones de manera eficiente.\n* Tener un código limpio.\n* Aplicar tecnología para resolver sus problemas.\n* Tener un conjunto de reglas y convenciones.\n* Entorno de desarrollo optimizado en productividad.\n\n## Requisitos básicos para utilizar Webpack \n\nComo requisitos básicos se necesita [node.js](https://nodejs.org/es/) el cual también instalara npm para administrar los paquetes. Para verificar si ya lo tienes y ver que versión tienes de node y npm debes poner en tu terminal los siguiente.\n\n```cmd\nnode -v\nnpm -v\n```\n\nPuedes encontrar mas información sobre comando de npm en su [documentación](https://docs.npmjs.com/).\n\nTambién será necesario conocimientos en [React](https://reactjs.org/).\n\n## 🙌 Conceptos básicos \n\nPara entender mejor el proceso de configuración hay que entender bien sus conceptos.\n\n* **Entry:** Indica qué módulo webpack debería usar para comenzar a construir su gráfica de dependencias. De forma predeterminada su valor es `./src/index.js`, pero pude especificarse un punto de entrada diferente o múltiples puntos de entrada\n\n* **Output:** La salida en webpack hace referencia a la ubicación dónde emitir los paquetes que crea como dependencias y cómo nombrar estos archivos. Su valor predeterminado  es `./dist/main.js`.\n\n* **Loaders:** Ayuda que webpack procese otros tipos de archivo como `.css` y los convierta en módulos válidos que su aplicación pueda consumir y agregar al gráfico de dependencias. \n\n  Los **loaders** tienen dos propiedades en la configuración de sus paquetes: \n\n  1. `test` propiedad que indica qué tipo de archivo o archivos debe transformarse.\n  2. `use` propiedad que indica qué loader debe usar para realizar la transformación\n\n* **Plugins:** Realiza tareas como la optimización de paquetes, la gestión de archivos y la inyección de variables de entorno. Para utilizar un plugin es necesario `require()` y agrega e a la `plugins` matriz.  \n\n* **Mode:** Un parámetro para indicar en que modo se esta ejecutando webpack `development`, `production` o `none`, para cada entorno incorpora optimizaciones diferentes. El valor por defecto es `production` .\n\n## Primero empezaremos un proyecto\n\n### Qué necesitamos instalar\n\nComo dependencias de desarrollo serán:\n\n1. **Webpack**: es el core del sistema, para manipular los archivos\n2. **Webpack-cli** es la herramienta o api utilizada para ejecutar webpack, funciona como parte para la configuración de webpack. *Cli significa coman line interface*.\n\nBueno con esto ya puedes empezar instalándolas.\n\n```\nnpm install -D webpack webpack-cli\n```\n\nEl **-D** es igual al **--save-dev** para instalar como dependencia de desarrollo.\n\nEstá seria la estructura usaremos por ahora una carpeta **src** que tendrá todos   nuestros archivos del proyecto. El **.gitignore** para decirle a git que archivos no se  requiere que tenga seguimiento. El **index.hml** para la plantilla html que tomara  webpack. Y el **webpack.config.js** que gracias al cli de webpack configuraremos según nuestras necesidades. En el archivo **index.js** puedes agregar un `console.log('Hello Word')` para comenzar.\n\n![Estructura de archivos](./ImgReadme/estructurabasica.jpg)\n\n### Configuración para empezar el webpack.config.js\n\nEste archivo esta escrito en **CommonJS** que se utiliza para definir una serie de especificaciones fuera del navegador.\n\n\n```javascript\nconst path = require('path');\nmodule.exports = {\n\tentry: './src/index.js',\n\toutput: {\n\t\tfilename: 'bundle.js',\n\t\tpath: path.resolve(__dirname, 'dist'),\n\t},\n    mode: 'developmen'\n};\n```\n\nEl modulo que se utilizara es [Path](https://nodejs.org/api/path.html) que es un modulo nativo de node y se utiliza para trabajar con rutas de archivos y directorios. Como se puede notar se esta exportando un objeto con el `module.export` algo parecido con al `export default`. En el apartado de conceptos básicos se definió el entry y el output que son como salida y entrada.\n\n- En el **entry** le decimos donde esta nuestro archivo javascript principal.\n- En el **output** se dira donde queremos poner el proyecto ya pasado por webpack. Las configuraciones principales serán el **filename** que es el nombre del archivo de salida, y el **path** que es la ubicación del archivo para eso se utiliza el modulo path con el método [**resolve**](https://nodejs.org/api/path.html#path_path_resolve_paths) y por parámetros le diremos un conjunto de rutas que va mezclar. Utilizaremos **__dirname** que es una variable para manejar rutas. \n- Puedes agregar una tercera configuración llamada **mode** con **developmen** o **production**\n\n### Probar la configurado por ahora \n\nPuedes hacerlo de manera tediosa con `npx webpack` o agregando un script en el package.json.\n\n```javascript\n\"scripts\": {\n\t\"build\": \"webpack\"\n},\n```\n\ny en tú terminal escribes `npm run build`. Si todo va bien veras un nuevo archivo llamado dist y dentro un archivo llamado **bundle.js**. Después puedes agregar el script en el index.html para probar.\n\n## Plugins HtmlWebpackPlugin\n\nEl [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) se utiliza para crear y simplificar un archivo html. Para instalarlo es el comando:\n\n```\nnpm install -D html-webpack-plugin\n```\n\nPara está ocasion creamos una carpeta `public` y en ella movemos el archivo `index.html` y un archivo `.ico`(no es necesario que sea ese formato). En el archivo `index.js` agregas lo siguiente:\n\n```javascript\ndocument.body.innerHTML = '\u003ch1\u003eHello World\u003c/h1\u003e';\n```\n\nPara agregar a la fuerza código html en el navegador. Ahora en las configuraciones de webpack agregamos.\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nmodule.exports = {\n    // ...\n\t// Las configuraciones anteriores\n\tplugins: [\n\t\tnew HtmlWebpackPlugin({\n            template: './public/index.html',\n\t\t\tfilename: './index.html',\n\t\t\tfavicon: './public/favicon.ico',\n\t\t}),\n\t],\n};\n```\n\nSe llama el HtmlWebpackPlugin y en la propiedad **plugins**, el cual es un arreglo, se agrega HtmlWebpackPlugin instanciándolo por que es una clase y se agregan ciertas configuraciones.\n\n- **filename**: El nombre del html generado.\n- **favicon**: El icono que se muestra en la pestaña.\n- **template**: La ubicación del `hmtl` que queremos usar. Esto es parecido a react, el cual pronto daremos un ejemplo.\n\nAl ejecutar el comando `npm run build` en la carpeta `dist` notaras un index.html y el nuevo favion.ico. Existe otras parámetros que se pueden dar para el html, esta en la [documentación](https://github.com/jantimon/html-webpack-plugin). Para probar esto de forma local puedes usar [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer), cuando agregues react te será de ayuda, o también puedes usar [serve](https://www.npmjs.com/package/serve) que hará más o menos lo mismo.\n\n## Utilizando CSS :call_me_hand:\n\nPara que webpack procese el css hay que installar dos loaders.\n\n- **[css-loader](https://webpack.js.org/loaders/css-loader/)**: que interpretara los `@import` y los `url()` y los pasara a `import/require()`.\n- **[style-loader](https://webpack.js.org/loaders/style-loader)**: Inyectara los estilos es el DOM.\n\n```\nnpm install -D style-loader css-loader\n```\n\nAhora en el webpack.config.js al ser loaders que se utilizan para diferentes tipos de archivos, tiene que ser convertidos en [modulos](https://webpack.js.org/concepts/modules/) validos para que la aplicación pueda consumir y agregar a las dependencias. En el archivo agregar lo siguiente:\n\n```javascript\nmodule: {\n\trules: [\n        {\n            test: /\\.css$/i,\n            use: [ 'style-loader', 'css-loader' ],\n        },\n    ],\n},\n```\n\nEl  parámetro `test` con expresiones regulares indica el formato de archivos que tiene que buscar.\n\nAhora puedes crear una carpeta `css` y creas un `main.css` con lo siguiente:\n\n````css\n* {margin: 0;}\nbody {\n\tbackground-color: hsl(202, 55%, 10%);\n\twidth: 100vw;\n\theight: 100vh;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\ttext-align: center;\n}\nh1 {\n\tcolor: hsl(0, 0%, 92%);\n\tfont-size: 2em;\n\tfont-family: monospace;\n\tmargin-bottom: 1rem;\n}\n````\n\nY en el `index.js` lo importas.\n\n```js\nimport './css/main.css';\n```\n\nEjecutas el `npm run build` y pruebas el index.html.\n\n## Cargando imágenes :framed_picture:\n\nPara cargar imágenes con webpack utilizando el **[file-loader](https://webpack.js.org/loaders/file-loader)**, existen otros métodos pero por el momento solo utilizare este. Lo primero es instalarlo:\n\n```\nnpm install -D file-loader\n```\n\nNo olvides el  -D. En el archivo de webpack.config.js agregamos lo siguiente.\n\n```js\n{\n\ttest: /\\.(png|jpe?g)$/i,\n    loader: 'file-loader',\n    options: {\n    \toutputPath: 'assets/img',\n        name: '[name].[ext]',\n\t},\n},\n```\n\nAquí como puedes ver no utilizamos el use como con los loader css por que solo es un loader pero si fueran varios si seria necesario usar el use, y el `options` que es el que lleva la configuración del **file-loader** iría con él dentro del arreglo. Para probar puedes agregar lo siguiente en el `index.js`.\n\n```js\nimport image from './img/imagen.png';\nconst body = document.body;\nbody.innerHTML = `\n\u003cdiv\u003e\n    \u003ch1\u003eHello World\u003c/h1\u003e\n    \u003cimg src=${image} alt=\"Imagen\"/\u003e\n\u003c/div\u003e`;\n```\n\nDentro de `src` creas una carpeta llamada `img` y dentro agregas la imagen. Ejecutas `npm run build` y listo.\n\n## Recopilar \n\n\u003cimg width=\"600\" src=./ImgReadme/interludio.jpg /\u003e\n\nHasta ahora ya tenemos una templeta de `html`, ya cargamos `css` y cargamos imágenes, tendríamos algo así:\n\n\n## Agregando Babel\n\nSi quieres usar javascript moderno en tu proyecto deberás agregar una tecnología llamada [Babel](https://babeljs.io/), y lo que hará es tomar nuestro javascript y convertirlo a una versión no tan moderna de javascript que soporte el navegador. Lo primero será instalar lo que por ahora necesitamos:\n\n```\nnpm i -D  babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime\n```\n\n```\nnpm install @babel/runtime\n```\n\n- `babel-loader`:  es el loader que se utiliza para que babel y webpack trabajen juntos.\n- `@babel/core`: es el corazón de babel.\n- `@babel/preset-env`:  ayuda a transformar código actual en código soportado por el navegador.\n- `@babel/plugin-transform-runtime`: nos ayudara principalmente a escribir código asíncrono.\n- `@babel/runtime`: es el corazón por el cual utilizaremos para escribir código asíncrono.\n\nAhora hay que ir al `webpack.config.js` y agregar en las `rules` lo siguiente:\n\n```js\n{\n    test: /\\.js$/i,\n    use: 'babel-loader',\n    exclude: /node_modules/,\n},\n```\n\nEl `test` como siempre se encarga de buscar los archivos, en este caso los terminados en  `.js`. El loader que se usara y el parámetro `exclude: /node_modules/` que le indicamos a babel omitir la carpeta node_modules.\n\nAhora hay que crear un archivo llamado `.babelrc` y en el escribimos lo siguiente:\n\n```json\n{\n    \"presets\": [ \"@babel/preset-env\" ],\n    \"plugins\": [ \"@babel/plugin-transform-runtime\" ]\n}\n```\n\nEl `presets` es para los pre-ajustes y los `plugins` que son complementos para mejorar el soporte de javascript.\n\nPara probarlo utilizaremos la API de [Pokemon](https://pokeapi.co). Lo primero será crear un nuevo archivo llamado `search.js` y dentro creamos una función que recibirá un parámetro llamado `id`, la función utilizará `asinc` y en ella haremos la consulta a la api.\n\n```js\nasync function searchPokemon(id){\n\tconst res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);\n\tconst poke = await res.json();\n\treturn poke;\n}\nexport default searchPokemon;\n```\n\nAhora en `index.js` llamamos la función y recibiremos el parámetro por medio de un `prompt`. En el `then` llamamos una función que utilizaremos para renderizar los datos recibidos de la api.\n\n```js\nimport searchPokemon from './search';\n// Mensaje al inicio por el cual recibiremos el id para la api\nconst id = prompt('Ingrese un id para buscar un pokemon');\n// Ejecutamos la api \nsearchPokemon(id).then(data =\u003e {\n\t\trender(data);\n\t}).catch(error =\u003e console.log(error));\n// Para renderizar la informacion\nconst render = data =\u003e {\n\tconst pokemonImg = document.createElement('img');\n\tpokemonImg.setAttribute('src', data.sprites.front_default);\n\tpokemonImg.classList.add('pokeImg');\n\tdocument.body.append(pokemonImg);\n};\n```\n\nY si todo sale bien se vera así.\n\n \u003cdiv style=\"text-align: center; displey: flex\"\u003e\n \t\u003cimg src=./ImgReadme/AgregandoBabel.jpg width=\"500\"/\u003e\n\t\u003cimg src=./ImgReadme/AgregandoBabel2.jpg width=\"200\"/\u003e\n \u003c/div\u003e\n\n## Agregando \u003cimg width=\"20\" src=https://www.vectorlogo.zone/logos/reactjs/reactjs-icon.svg /\u003e React\n\nComo principal deberás de instalar `react react-dom` como dependencias de producción:\n\n```\nnpm install react react-dom\n```\n\nY para que babel como webpack puedan compilar ese código deberás de instalar `@babel/preset-react`\n\n```\nnpm install -D @babel/preset-react\n```\n\n Una vez ya instalado solo tendrás que modificar `.babelrc` de esta forma:\n\n```js\n\"presets\": [\n    \"@babel/preset-env\",\n    \"@babel/preset-react\"\n],\n```\n\nAhora para empezar con react hay que ir al html que se usa como **template** y en el `body` agregar lo siguiente:\n\n```html\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\nEn el `index.js` se importará `react` y `react-dom` para empezar, luego se usara la función `render` de `react-dom` para renderizar un componente llamad `App` que crearemos luego y como segundo parámetro le pasamos donde debe de insertar el componente.\n\n```js\nimport './css/main.css';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n Ahora hay que crear el archivo `App.js`, en el importamos `react` y una imagen para seguir con lo que se vio anteriormente. Creamos una función y la exportamos por default dentro agregamos la imagen. Algo como esto:\n\n```jsx\nimport React from 'react';\nimport image from './img/imagen2.png';\nexport default function App(){\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eHello World\u003c/h1\u003e\n\t\t\t\u003cimg src={image} alt=\"Imagen\" /\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nY listo, ejecutas el `npm run build` y verías en el navegador algo como esto:\n\n\u003cimg width=\"500\" src=./ImgReadme/react.jpg /\u003e\n\n## Webpack server\n\n[Webpack dev server](https://webpack.js.org/configuration/dev-server/) nos ayudara a ser mas eficientes a la hora de estar desarrollando la aplicación. Si no quieres utilizarlo pero sientes tedioso esta haciendo el `npm run build` en cada momento, lo que puedes hacer es agregarle ` -- -w` al final del comando, quedara algo como esto:\n\n```\nnpm run build -- -w\n```\n\nY al ejecutarlo mostrara un mensaje que dirá algo así`[webpack-cli] watching files for updates...`. Puedes cambiar algo de un archivo y ver que se vuelve a ejecutar el comando.\n\nSi no te gusta estar haciendo lo anterior, por que se recarga la pagina, puedes utilizar `webpack-dev-server`, para usarlo deberás también instalar [@webpack-cli/serve](https://github.com/webpack/webpack-cli/blob/master/packages/serve/README.md#webpack-cli-serve) para que funcione de manera correcta. También deberás instalar [Clean plugin for webpack](https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional) que limpiara de forma predeterminada `output.path` cada vez que se ejecute el server.\n\n```\nnpm install -D webpack-dev-server @webpack-cli/serve clean-webpack-plugin\n```\n\nUna vez instalado agregas un nuevo script en el `package.json`, yo lo voy a llamar `\"dev\": \"webpack-cli serve\"`. En el `webpack.config.js` agregas unas configuraciones opcionales:\n\n```js\n// Arriba de HtmlWebpackPlugin\nconst { CleanWebpackPlugin } = require('clean-webpack-plugin');\n// Dentro de module.exports\nplugins: [\n    new CleanWebpackPlugin(),\n    new HtmlWebpackPlugin({\n        template: './public/index.html',\n        filename: './index.html',\n        favicon: './public/favicon.ico',\n    }),\n],\ndevServer: {\n    contentBase: './dist',\n\tport: 9000,\n    open: true,\n},\n```\n\nAl ejecutar el comando deberá de abrirse el navegador en el puerto 9000 y listo ya tiene un server. Con esto puede hacer cambios en el proyecto y automáticamente verás reflejados los cambios.\n\n## Conclusión :end:\n\nCon esto ya puedes trabajar tranquilo en un proyecto con react que soporte javascript moderno, imágenes, css de forma tranquila.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frearalf%2Fpracticewebpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frearalf%2Fpracticewebpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frearalf%2Fpracticewebpack/lists"}