{"id":26226905,"url":"https://github.com/mrinternauta/js-portfolio","last_synced_at":"2026-04-28T21:34:59.425Z","repository":{"id":107297986,"uuid":"491282444","full_name":"MrInternauta/js-portfolio","owner":"MrInternauta","description":"Simple portfolio project developed with JS, stylus, and webpack","archived":false,"fork":false,"pushed_at":"2023-08-06T18:40:09.000Z","size":580,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-07T05:45:18.593Z","etag":null,"topics":["babel","css","optimization","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"https://unrivaled-axolotl-491681.netlify.app/, http://3.86.210.225/","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/MrInternauta.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":"2022-05-11T21:52:12.000Z","updated_at":"2023-08-06T20:11:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"c19fa4b6-deb0-480d-ae1d-0773c1bb91d8","html_url":"https://github.com/MrInternauta/js-portfolio","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/MrInternauta/js-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrInternauta%2Fjs-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrInternauta%2Fjs-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrInternauta%2Fjs-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrInternauta%2Fjs-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrInternauta","download_url":"https://codeload.github.com/MrInternauta/js-portfolio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrInternauta%2Fjs-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32400868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["babel","css","optimization","webpack","webpack-loader"],"created_at":"2025-03-12T19:31:55.081Z","updated_at":"2026-04-28T21:34:59.419Z","avatar_url":"https://github.com/MrInternauta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learning WebPack \n\n## Instalation\n### when you are creating the project for first time\nInstall WebPack and WebPack CLI in development dependencies\n```\nnpm i webpack webpack-cli -D\n```\n\n## Instalation when use a created project\n```\nnpm i\n```\n\n## Execution\nHave yo exist the source in src/index.js\n## Development\n```\nset API=\u003cURL\u003e \u0026\u0026 npm run start\n```\n\n## Production\n```\nnpm run prod\n```\n\n### With config file\nIf you would like to execute with a config file add the follow flag\n```\n--config webpack.config.js\n```\nExample: Execute on production mode\n```\nnpx webpack --mode production --config webpack.config.js \n```\nExample: Execute on development mode\n```\nnpx webpack --mode development --config webpack.config.js \n```\n\n## Plugins and Loaders\n### Loaders\n#### Webpack only allow JavaScript and JSON.\n#### The loaders allow proccess file diferents to become in valid module\n#### In top level, we have only two configurations por loaders\n* test - This property allow indentify which fila have to be trasformed\n* use - This property allow indentify which loader will use for trasform the files\n\n### Plugins\nWhile the loader change modules, the plugins can be used for extend specific functionalities like packege optimization, file management and enviroments variables injections\n\n## Add Babel\nInstalation\n```\nnpm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime\n```\n## Explanaiton for each modules\n\nPlugin to work with asyncronus code\n#### babel-loader allow use babel with webpack\n#### @babel/core babel core\n#### @babel/preset-env allow work with last JavaScript features\n#### @babel/plugin-transform-runtime allow work with asyncronus code (async y await)\n\n### Create Babel config (like the file in the project)\n```\n.babelrc\n```\n### To work babel with webpack\n```\n  module: {\n    rules: [\n      {\n        test: /\\.m?.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"babel-loader\"\n        },\n      }\n    ]\n  },\n```\n### Add HtmlWebpackPlugin\n\n```\nnpm i html-webpack-plugin -D\n```\nAdd config to plugins section\n```\n  plugins: [\n    new html({\n      // CONFIGURACIÓN DEL PLUGIN\n      // INYECTA EL BUNDLE AL TEMPLATE HTML\n      inject: true,\n      // LA RUTA AL TEMPLATE HTML\n      template: './public/index.html',\n      // NOMBRE FINAL DEL ARCHIVO\n      filename: './index.html'\n    })\n  ]\n  ```\n### Add Css Plugin\n\n#### For CSS\n```\nnpm i mini-css-extract-plugin css-loader -D\n```\nChange\n```\n  {\n    test: /\\.css$/,\n    use: [\n      miniCssExtractPlugin.loader\n      , 'css-loader'\n    ]\n  }\n```\n\n#### For Stylus\n\n```\nnpm install --save-dev stylus stylus-loader\n```\nChange \n```\n{\n        test: /\\.css|\\.styl$/i,\n        use: [MiniCssExtractPlugin.loader,\n            \"css-loader\",\n            \"stylus-loader\"]\n},\n```\n\n#### For sass\n```\nnpm i -D node-sass sass-loader\n```\nChange \n```\n{\n        test: /\\.s?css$/,\n        use: [MiniCssExtractPlugin.loader,\n            \"css-loader\",\n            \"sass-loader\"]\n},\n```\n\n### Add copy Plugin\n\n```\nnpm i copy-webpack-plugin -D\n```\n\n```\nconst copyPlugin = require('copy-webpack-plugin');\n    new copyPlugin({\n      patterns: [\n        {\n          from: path.resolve(__dirname, 'src', 'assets/images'),\n          to: './assets/images'\n        }\n      ]\n    })\n```\n\n### Add loader for images\n\n```\n  {\n    test: /\\.png/,\n    type: 'asset/resource'\n  }\n```\n\nWhere you gonna use the image\n```\nimport instagram from '../assets/images/instagram.png';\n\u003cimg src=\"${instagram}\" /\u003e\n```\n\n### Add loader for fonts\nAdd rule \n```\n    {\n      test: /\\.(woff|woff2)$/,\n      use: {\n        loader: 'url-loader',\n        options: {\n          limit: 10000, // O LE PASAMOS UN BOOLEANOS TRUE O FALSE\n          // Habilita o deshabilita la transformación de archivos en base64.\n          mimetype: 'application/font-woff',\n          // Especifica el tipo MIME con el que se alineará el archivo. \n          // Los MIME Types (Multipurpose Internet Mail Extensions)\n          // son la manera standard de mandar contenido a través de la red.\n          name: \"[name].[ext]\",\n          // Especifica el nombre del archivo generado.\n          outputPath: './assets/fonts/',\n          // EL DIRECTORIO DE SALIDA\n          publicPath: './assets/fonts/',\n          esModule: false\n        }\n      }\n    }\n```\nIn the css\n```\n@font-face {\n  font-family: 'Ubuntu';\n  src: url('../assets/fonts/ubuntu-regular.woff2') format('woff2'),\n    url('../assets/fonts/ubuntu-regular.woff') format('woff');\n  font-weight: 400;\n  font-style: normal;\n}\n```\n\n### Optimization\n```\nnpm i css-minimizer-webpack-plugin terser-webpack-plugin -D\nconst CssMinimizer = require('css-minimizer-webpack-plugin');\nconst TerserPlugin = require('terser-webpack-plugin')\n\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizer(),\n      new TerserPlugin()\n    ]\n  }\n```\n\nChange the hash\neg.\n```\n    filename: '[name].[contenthash].js',\n    name: \"[name].[contenthash].[ext]\",\n\n```\n\nGenerate a Bundle Analyzer\nnpx webpack --profile --json \u003e stats.json\nnpx webpack-bundle-analyzer stats.json\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrinternauta%2Fjs-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrinternauta%2Fjs-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrinternauta%2Fjs-portfolio/lists"}