{"id":16529518,"url":"https://github.com/leonardofaria/webpack-lunch-and-learn","last_synced_at":"2026-05-11T10:35:45.667Z","repository":{"id":139464770,"uuid":"130883829","full_name":"leonardofaria/webpack-lunch-and-learn","owner":"leonardofaria","description":"🍕\u0026 📖at @Thinkific about webpack 4","archived":false,"fork":false,"pushed_at":"2018-04-25T05:41:05.000Z","size":248,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T19:14:38.755Z","etag":null,"topics":["javascript","tutorial","webpack","webpack4"],"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/leonardofaria.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":"2018-04-24T16:31:11.000Z","updated_at":"2018-04-25T05:43:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"c518934c-6b3d-4230-8fba-c18acdf9231d","html_url":"https://github.com/leonardofaria/webpack-lunch-and-learn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardofaria%2Fwebpack-lunch-and-learn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardofaria%2Fwebpack-lunch-and-learn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardofaria%2Fwebpack-lunch-and-learn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardofaria%2Fwebpack-lunch-and-learn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leonardofaria","download_url":"https://codeload.github.com/leonardofaria/webpack-lunch-and-learn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241629739,"owners_count":19993707,"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":["javascript","tutorial","webpack","webpack4"],"created_at":"2024-10-11T17:45:13.591Z","updated_at":"2025-11-28T14:08:44.832Z","avatar_url":"https://github.com/leonardofaria.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-lunch-and-learn\n\nThis is a step by step webpack setup. You can check the [history of commits](https://github.com/leonardofaria/webpack-lunch-and-learn/commits/master) to see what is going on.\n\n## [Step 1 - Add lodash](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/e79aa1a8c294c9830e88a2e1fb743cda63e4d133)\n\nAdding the whole lodash will make your bundle huge (69.9 KiB).\n\n## [Step 2 - Add lodash/uniq](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/8db0fbe2c016bde6bc9f3e177a7fac2d92f5cfbe)\n\nAdding the specific function function from lodash can decrease the bundle size (7.5 KiB)\n\n## [Step 3 - Add lodash-es](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/7c524e08a77f692ca56159de72125ce54345ce28)\n\nAdding the specific version of lodash using modules can make things even better (5.9 KiB)\n\n## [Step 4: Add webpack-bundle-analyzer](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/3602077390a6ebec42cb001626863272664af1c9)\n\nwebpack-bundle-analyzer details what is inside your bundle\n\n## [Step 5: Add performance warnings](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/8f7f2c32da7894a4276fe37107918d23d4866160)\n\nIt is possible to set warning and errors when you file reaches a specific size.\n\n## [Step 6: Add button - Pre Code Splitting](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/83ea79adc6c6d0959e001b8878f262b4d9b9afaf)\n\nLet's add a button in the screen to show the unique elements of an array.\n\n## [Step 7: Add Code Splitting](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/ea16b4ea125dac11f5988e1acb458e7daaa00cd7)\n\nWe can assign an import to a variable and load the module on demand.\n\n## [Step 8: Refactor Code Splitting](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/1f0ae5c55153dc2a4f1c58a0e01cfa8fc1788906)\n\nA quick refactor to move the default export.\n\n## [Step 9: Add another Code Splitting example](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/6889f33c30a942c849028f97c823975e0d10d6db)\n\nLet's add another example using the date-fns package.\n\n## [Step 10: Add another Code Splitting example (themes)](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/ddbe5511e189970cc0d9f074192574af00a05463)\n\nLet's style the app - and use more code splitting.\n\n## [Step 11A: Add jQuery](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/31bda8854abc45ec6999e0918274c4c95400cff7)\n\nLet's add jQuery and some interaction.\n\n## [Step 11B: Use external jQuery](https://github.com/leonardofaria/webpack-lunch-and-learn/commit/95b39c57757a9fccd0adf4c80ab52e210b1d9328)\n\nAdding jQuery increased our bundle. We can use `externals` to exclude a import from the bundle and then revert this situation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonardofaria%2Fwebpack-lunch-and-learn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleonardofaria%2Fwebpack-lunch-and-learn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonardofaria%2Fwebpack-lunch-and-learn/lists"}