{"action":"created","issue":{"url":"https://api.github.com/repos/actum/gulp-dev-stack/issues/169","repository_url":"https://api.github.com/repos/actum/gulp-dev-stack","labels_url":"https://api.github.com/repos/actum/gulp-dev-stack/issues/169/labels{/name}","comments_url":"https://api.github.com/repos/actum/gulp-dev-stack/issues/169/comments","events_url":"https://api.github.com/repos/actum/gulp-dev-stack/issues/169/events","html_url":"https://github.com/actum/gulp-dev-stack/issues/169","id":229584294,"number":169,"title":"Webpack 2","user":{"login":"kettanaito","id":14984911,"avatar_url":"https://avatars3.githubusercontent.com/u/14984911?v=4","gravatar_id":"","url":"https://api.github.com/users/kettanaito","html_url":"https://github.com/kettanaito","followers_url":"https://api.github.com/users/kettanaito/followers","following_url":"https://api.github.com/users/kettanaito/following{/other_user}","gists_url":"https://api.github.com/users/kettanaito/gists{/gist_id}","starred_url":"https://api.github.com/users/kettanaito/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kettanaito/subscriptions","organizations_url":"https://api.github.com/users/kettanaito/orgs","repos_url":"https://api.github.com/users/kettanaito/repos","events_url":"https://api.github.com/users/kettanaito/events{/privacy}","received_events_url":"https://api.github.com/users/kettanaito/received_events","type":"User","site_admin":false},"labels":[{"id":260724957,"url":"https://api.github.com/repos/actum/gulp-dev-stack/labels/enhancement","name":"enhancement","color":"84b6eb","default":true}],"state":"open","locked":false,"assignee":{"login":"kettanaito","id":14984911,"avatar_url":"https://avatars3.githubusercontent.com/u/14984911?v=4","gravatar_id":"","url":"https://api.github.com/users/kettanaito","html_url":"https://github.com/kettanaito","followers_url":"https://api.github.com/users/kettanaito/followers","following_url":"https://api.github.com/users/kettanaito/following{/other_user}","gists_url":"https://api.github.com/users/kettanaito/gists{/gist_id}","starred_url":"https://api.github.com/users/kettanaito/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kettanaito/subscriptions","organizations_url":"https://api.github.com/users/kettanaito/orgs","repos_url":"https://api.github.com/users/kettanaito/repos","events_url":"https://api.github.com/users/kettanaito/events{/privacy}","received_events_url":"https://api.github.com/users/kettanaito/received_events","type":"User","site_admin":false},"assignees":[{"login":"kettanaito","id":14984911,"avatar_url":"https://avatars3.githubusercontent.com/u/14984911?v=4","gravatar_id":"","url":"https://api.github.com/users/kettanaito","html_url":"https://github.com/kettanaito","followers_url":"https://api.github.com/users/kettanaito/followers","following_url":"https://api.github.com/users/kettanaito/following{/other_user}","gists_url":"https://api.github.com/users/kettanaito/gists{/gist_id}","starred_url":"https://api.github.com/users/kettanaito/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kettanaito/subscriptions","organizations_url":"https://api.github.com/users/kettanaito/orgs","repos_url":"https://api.github.com/users/kettanaito/repos","events_url":"https://api.github.com/users/kettanaito/events{/privacy}","received_events_url":"https://api.github.com/users/kettanaito/received_events","type":"User","site_admin":false}],"milestone":null,"comments":2,"created_at":"2017-05-18T07:52:58Z","updated_at":"2017-08-09T07:51:24Z","closed_at":null,"body":"## Introduction\r\n[Webpack](https://webpack.js.org) is undoubtedly one of the greatest things to handle JavaScript (any not only) bundling and serving for development environment.\r\n\r\n## Benefits\r\n* **Flexibility**. You can configure the source and transformation chain (loaders, plugins) to process your files. **Result:** Easily adoptable to any project's needs.\r\n\r\n* **Performance:**\r\n  * [Code splitting](https://webpack.github.io/docs/code-splitting.html). Client downloads only that JavaScript code which is really needed at the moment. **Result:** No redundant downloads, faster page load time.\r\n  * [Tree shaking](https://webpack.js.org/guides/tree-shaking/). Automatically analyzes the code and removed unused parts (including 3rd-party libraries). **Result:** Smaller bundle file size, faster page load time.\r\n  * Varios optimizations (OptmiseJS, Gzip compression, Prepack). **Result:** More efficient \r\n\r\n* **DX:**\r\n  * [Webpack development server](https://webpack.github.io/docs/webpack-dev-server.html). Provides [Hot Module Replacement](https://webpack.js.org/guides/hmr-react/), which means your changes in JavaScript take place without page reload and loosing the application's state. **Result:** Faster development process, great DX.\r\n  * Ability to separate *vendor bundle* (React, Redux, any 3rd-party modules) and *client bundle* (actual code of the application) and process them separately. **Result:** Faster initial and incremental builds, faster development process.\r\n  * Simplified build pipeline. With Webpack it is possible to control multiple transformation pipelines of multiples file types (CSS, JS, Images, Fonts, etc.). **Result:** We can simplify our gulp tasks, remove unnecessary tasks which will be replaced by Webpack, and therefore keep our code cleaner and easier to understand.\r\n* **Extendability**. It is possible to easily extend the configuration to bundle CSS, images, fonts, anything. It is also quite simple to create a separate configurations for client/server/vendor/any end-points.\r\n\r\n## Implementation\r\nThis is a rather big change, therefore it is separated into several waves of implementation. Each wave will be followed by pull request and code approval. This issue is regarding **only JavaScript bundling** as a starting point. We can always extend the configuration once we have it (Webpack can beautifully bundle CSS, images, icons, fonts, anything).\r\n\r\n### First wave\r\n- [ ] Prepare dev-stack for Webpack\r\n- [ ] Integrate Webpack into our Gulp pipeline\r\n- [ ] Clean up current Gulp tasks which will be gracefully replaced by Webpack (js, lint, etc.)\r\n- [ ] Validate and test optimal configuration setup\r\n- [ ] Provide smart environment-specific configurations/extensions\r\n- [ ] Provide basic loaders for everyday usage\r\n- [ ] (Production) Introduce JavaScript optimization tools (OptimizeJS, prepack, Gzip)\r\n- [ ] Introduce basic set of `resolve.alias` for utmost DX\r\n- [ ] Introduce `vendor.js` bundle for third-party libraries (React, redux, younameit)\r\n- [ ] Provide proper lazy initialization of JS modules/components for efficient code splitting\r\n\r\n### Second wave\r\n- [ ] Document how to configure Webpack\r\n- [ ] Document simplified adjusted workflow\r\n- [ ] Test new configurations on real-scale projects (you can suggest in the comments)\r\n- [ ] Test tree shaking\r\n- [ ] Involve volunteers to test the changes\r\n\r\n### Third wave\r\n- [ ] Implementing adjustments and suggestions from colleagues\r\n- [ ] Optional code cleaning, configuration performance improvements\r\n\r\n## Motivation\r\nI would like to use my experience with custom configurations of Webpack from side projects, Conrad, and countless articles and posts on the web. There are a lot of details, which, if not configured, or configured wrong, can cause a spectre of various issues during development and production.\r\n\r\n## Integration\r\nIn order to eliminate incompatibility issues, mentioned changes should be stored in the separate release of `gulp-dev-stack` repository, marking a new era of our dev-stack.\r\n* You clone v1 by default\r\n* You clone v2 when specified\r\n\r\nThis separation is definitely possible, feel free to suggest how it may be done if you did something similar in your repositories, otherwise I will just read the documentation of Git releases.\r\n\r\nAdditionally, choosing proper technology for your tasks is a great ground to end up with good implementation. Webpack is a great tool, yet it is still very likely that some projects will not get much benefit from it. This makes versioning even more important than ever.\r\n\r\n## Update from 23.06\r\nThis change has been approved as the part of ACTUM LAB. I will start on this as soon as I align with @DavidSlavik and my PM."},"comment":{"url":"https://api.github.com/repos/actum/gulp-dev-stack/issues/comments/321181177","html_url":"https://github.com/actum/gulp-dev-stack/issues/169#issuecomment-321181177","issue_url":"https://api.github.com/repos/actum/gulp-dev-stack/issues/169","id":321181177,"user":{"login":"DavidSlavik","id":2188078,"avatar_url":"https://avatars0.githubusercontent.com/u/2188078?v=4","gravatar_id":"","url":"https://api.github.com/users/DavidSlavik","html_url":"https://github.com/DavidSlavik","followers_url":"https://api.github.com/users/DavidSlavik/followers","following_url":"https://api.github.com/users/DavidSlavik/following{/other_user}","gists_url":"https://api.github.com/users/DavidSlavik/gists{/gist_id}","starred_url":"https://api.github.com/users/DavidSlavik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DavidSlavik/subscriptions","organizations_url":"https://api.github.com/users/DavidSlavik/orgs","repos_url":"https://api.github.com/users/DavidSlavik/repos","events_url":"https://api.github.com/users/DavidSlavik/events{/privacy}","received_events_url":"https://api.github.com/users/DavidSlavik/received_events","type":"User","site_admin":false},"created_at":"2017-08-09T07:51:23Z","updated_at":"2017-08-09T07:51:23Z","body":"Please, update particular tasks by checking of checkboxes in your description."}}
{"actor":{"display_login":"DavidSlavik"}}