{"id":22117854,"url":"https://github.com/arash-seifi/webpack","last_synced_at":"2026-03-01T01:01:13.203Z","repository":{"id":158090979,"uuid":"583299274","full_name":"Arash-Seifi/Webpack","owner":"Arash-Seifi","description":"A guide for those who have problems using Webpack","archived":false,"fork":false,"pushed_at":"2023-01-02T13:16:36.000Z","size":458,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T06:43:18.362Z","etag":null,"topics":["bootstrap","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/Arash-Seifi.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-12-29T11:10:17.000Z","updated_at":"2024-01-04T08:24:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"9c714f0f-94c5-4b15-a420-bf736fbea394","html_url":"https://github.com/Arash-Seifi/Webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Arash-Seifi/Webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arash-Seifi%2FWebpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arash-Seifi%2FWebpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arash-Seifi%2FWebpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arash-Seifi%2FWebpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arash-Seifi","download_url":"https://codeload.github.com/Arash-Seifi/Webpack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arash-Seifi%2FWebpack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29957128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T22:53:01.873Z","status":"ssl_error","status_checked_at":"2026-02-28T22:52:50.699Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["bootstrap","webpack"],"created_at":"2024-12-01T13:41:04.726Z","updated_at":"2026-03-01T01:01:13.190Z","avatar_url":"https://github.com/Arash-Seifi.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack\n### Check the other Branches for the next Parts\nWebpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.\n\nFirst we start by making our \"package.json\" file: \n```\nnpm init -y\n```\nNow we install our packages(webpack and webpack-cli):\n```\nnpm install --save-dev webpack webpack-cli\n```\nNOTE: if you see \"npm i -D webpack webpack-cli\" , it is the same but with their shortcuts\n\nNow in your root make an \"index.html\" file ,a src folder and a \"index.js\" inside your src folder ,and a \"webpack.config.js\" file\n\n![Base Folder Structure](https://user-images.githubusercontent.com/92459590/209946143-f9212a79-a7c4-48a5-9f39-cf109d2aa459.png)\n\n### Your Webpack.config.js\n![Webpack config](https://user-images.githubusercontent.com/92459590/209947678-781704e1-6492-4666-9649-f60830bdf832.png)\n\nYou can think of environments as the context in which your code is running. During development, you're building and running the application on your local machine. Going to production is the process of making your application ready to be deployed and consumed by users.so it means that the files that you work in development must not always be used in production , so webpack makes a \"dist\" folder that contains the code for out production\n\n## In package.json \nmake a new script: \n```\n\"scripts\" : {\n     \"build\": \"webpack --config webpack.config.js\"\n}\n```\nThe first command uses webpack and then we tell the webpack to, use the following file as its config\n\n## now if we run the command :\n```\nnpm run build\n```\nwe see that a new folder has been added to our root(dist),and inside that, there is a bundle file that we can Link in our \"index.html\" file\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farash-seifi%2Fwebpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farash-seifi%2Fwebpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farash-seifi%2Fwebpack/lists"}