{"id":28862296,"url":"https://github.com/theshefer/webpack","last_synced_at":"2026-04-09T22:45:34.411Z","repository":{"id":238738046,"uuid":"797409303","full_name":"theshefer/webpack","owner":"theshefer","description":"How to optimize your application performance with webpack","archived":false,"fork":false,"pushed_at":"2024-05-31T10:15:46.000Z","size":808,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-01T20:53:40.580Z","etag":null,"topics":["babel","react","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/theshefer.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":"2024-05-07T19:17:47.000Z","updated_at":"2024-05-31T10:15:49.000Z","dependencies_parsed_at":"2024-05-10T16:39:35.041Z","dependency_job_id":"549b5d29-985a-41de-a8f3-6f93eca6f01b","html_url":"https://github.com/theshefer/webpack","commit_stats":null,"previous_names":["sssshefer/webpack-course","theshefer/webpack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/theshefer/webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theshefer%2Fwebpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theshefer%2Fwebpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theshefer%2Fwebpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theshefer%2Fwebpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theshefer","download_url":"https://codeload.github.com/theshefer/webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theshefer%2Fwebpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260891312,"owners_count":23077919,"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":["babel","react","typescript","webpack"],"created_at":"2025-06-20T06:10:34.914Z","updated_at":"2026-04-09T22:45:33.177Z","avatar_url":"https://github.com/theshefer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://github.com/sssshefer/webpack/assets/63253440/06fcf7d0-9dce-4f60-99ef-1683c4552170\" alt=\"webpack-icon\" height=\"150\"\u003e\u003cp/\u003e\n\n# Every Day Webpack Features  \n\n\nThis project serves as a comprehensive guide for using webpack effectively in web development. It covers essential features and provides practical insights and examples to help developers optimize their workflow and boost application performance\n\n## This project inlcude how to:\n\n1) Connect the **environment variables**\n2) Make **different build scenarios**: for production and development \n3) Connect **HTML** to the application using webpack, configure **dynamic file names** in order to prevent client side files from being cashed\n4) Add **plugins** to webpack\n5) Add **Typescript support** and other **loaders** \n6) Properly migrate **webpack config to Typescript** and use **global.d.ts** file \n7) Use **dev server**, **watch mode** for better development experience and why do we need the **source map**\n8) Connect **react and jsx** \n9) Support **CSS styles** and use **SCSS preprocessor** \n10) Properly **decompose** the large **webpack config** and make **reusable components**\n11) Isolate styles with **CSS modules**\n12) Implement **routing**, **lazy components**, decrease a size of the bundle\n13) Create **aliases**, module resolving\n14) Work with **assets** (images, icons and more)\n15) Properly work with **global variables** and what is **tree shaking**\n16) Speed up build proccess by extracting **type checking** to **separate process**\n17) Stop reloading page after changing the code with **HMR (Hot Module Replacemenet)**\n18) Use **favicon** and copy any other files to final build with **copy plugin**\n19) Use **Babel** and create **own plugins** with it\n    \n### Git clone the repo \n```bash\n$ git clone https://github.com/sssshefer/webpack.git\n```\n\n### 1) How to run the project \n```bash\n$ npm run start\n```\n\n### 2) How to make development build\n```bash\n$ npm run build:dev\n```\n\n### 3) How to make production build\n```bash\n$ npm run build:prod\n```\n\n\n### 4) How to do typechecking\n```bash\n$ npm run typecheck\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheshefer%2Fwebpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheshefer%2Fwebpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheshefer%2Fwebpack/lists"}