{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack/issues/4392","repository_url":"https://api.github.com/repos/webpack/webpack","labels_url":"https://api.github.com/repos/webpack/webpack/issues/4392/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack/issues/4392/comments","events_url":"https://api.github.com/repos/webpack/webpack/issues/4392/events","html_url":"https://github.com/webpack/webpack/issues/4392","id":210711735,"number":4392,"title":"CommonChunkPlugin: Feature - Select statically imported modules from chunks that were created from a dynamic import (require.ensure / System.import / import(\"..\"))","user":{"login":"kazazor","id":1577655,"avatar_url":"https://avatars1.githubusercontent.com/u/1577655?v=3","gravatar_id":"","url":"https://api.github.com/users/kazazor","html_url":"https://github.com/kazazor","followers_url":"https://api.github.com/users/kazazor/followers","following_url":"https://api.github.com/users/kazazor/following{/other_user}","gists_url":"https://api.github.com/users/kazazor/gists{/gist_id}","starred_url":"https://api.github.com/users/kazazor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kazazor/subscriptions","organizations_url":"https://api.github.com/users/kazazor/orgs","repos_url":"https://api.github.com/users/kazazor/repos","events_url":"https://api.github.com/users/kazazor/events{/privacy}","received_events_url":"https://api.github.com/users/kazazor/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-02-28T07:50:42Z","updated_at":"2017-03-01T07:22:31Z","closed_at":null,"body":"**Do you want to request a *feature* or report a *bug*?**\r\n\r\nFeature for `CommonChunkPlugin`.\r\n\r\nSupport selecting modules from **non-entry** chunks. Meaning, select statically imported modules from chunks that were created from a **dynamic** import (`require.ensure` / `System.import` / `import(\"..\")`)\r\n\r\n**What is the current behavior?**\r\n\r\nCurrently `CommonChunkPlugin` only receives modules imported from **entry** chunks.\r\n\r\n**What is the expected behavior?**\r\n\r\n`CommonChunkPlugin` should receive also modules from **non-entry** chunks.<br>\r\nAnother option will be that the default behavior will be that the plugin won't be getting these modules and only with passing something like `selectAllChunks: true` will enable this behavior.\r\n\r\n**If this is a feature request, what is motivation or use case for changing the behavior?**\r\n\r\nMost of the examples out there talks about CodeSplitting but not talking about CodeSplitting with lazy loading. For example, load your main page as an entry chunk, and split the rest of your website routes to different chunks and only load those on demand.\r\n\r\nYou see the important need for this feature when you're trying to make a `vendors` chunk that will include the vendors from ALL the chunks including the ones for the different routes that are being created from a dynamic import as a split point.\r\n\r\nIn our opinion the best solution to create the `vendors` chunk will be using the `minChunks` function since the other two (specifying hard coded which packages to take / import `package.json`.dependencies) has a lot of issues with and this is the most dynamic way to do it:\r\n\r\n```js\r\n    new webpack.optimize.CommonsChunkPlugin({\r\n      name: 'vendors',\r\n      minChunks: ({ resource }) => /node_modules/.test(resource)\r\n    })\r\n```\r\n\r\nThe problem is that since `CommonsChunkPlugin` only gets modules form the **entry** chunks, so all the vendors from our different split points are not being added to this chunk.\r\n\r\nThe motivation around this feature request is that others won't need to do the workaround I'll show here.\r\n\r\n**Proposed temporary workaround and why it's not that good. Writing it here anyway so who ever needs it will see it and would be able to use it** \r\n\r\nWhat the lack of this feature forces us to do it for every dynamic import we're doing (using `import(\"path\")`) we're also going and creating an entry chunk for it. Just so the above code will work.\r\n\r\nThen, all of these \"duplicate\" chunks we're excluding from being added to the HTML using the `excludeChunks` of `HtmlWebpackPlugin`\r\n\r\nSo it basically looks like this:\r\n\r\n```js\r\n...\r\n\r\n// Why do we need to exclude these entries?\r\n// The entries here are being dynamically loaded per route in the application so we would like to set\r\n// them to be excluded form HtmlWebpackPlugin auto inject of entry chunks.\r\n//\r\n// If they are being dynamically loaded in the system, so why do you need them here at all?\r\n// We're creating a `vendors` chunk automatically from what being imported from `node_modules`, in order for webpack\r\n// to know about what code exists in these route chunks we need to set them as entries here.\r\n// That way we're getting everything we ever wanted! The `vendors` is being created out of ALL the vendors in the system,\r\n// and we're still able to dynamically load these chunks per route without having them injected to index.html at the beginning.\r\nconst excludeEntries = {\r\n  main: [path.join(chunksPath, 'main_chunk')],\r\n  A_template_collection: [path.join(pagesPath, 'TemplateCollectionPage')],\r\n  A_template_wizard: [path.join(pagesPath, 'TemplateWizardPage')],\r\n  A_edit_template: [path.join(pagesPath, 'TemplateEditPage')],\r\n  A_create_instance: [path.join(pagesPath, 'CreateInstancePage')],\r\n  B_issues_collection: [path.join(pagesPath, 'IssuesCollectionPage')]\r\n};\r\n\r\nconst entry = Object.assign({}, excludeEntries, {\r\n  application: [path.join(chunksPath, 'application_chunk')]\r\n});\r\n\r\nconst config = {\r\n    entry,\r\n    ...\r\n    plugins: [\r\n        new webpack.optimize.CommonsChunkPlugin({\r\n          name: 'vendors',\r\n          minChunks: ({ resource }) => /node_modules/.test(resource)\r\n        }),\r\n        new HtmlWebpackPlugin({\r\n          title: indexHtmlTitle,\r\n          resourceHintsMetaTags,\r\n          inject: true,\r\n          template: indexHtmlPath,\r\n          excludeChunks: Object.keys(excludeEntries)\r\n        }),\r\n    ]\r\n    ...\r\n}\r\n\r\n```\r\n\r\nThe dynamic imports are being used on the same paths as the entry chunks that are being excluded from the html.\r\n\r\nThis causes some difficulties for us:\r\n\r\n1. If you dynamically import something and forget to put it here as well it will not go into the vendors chunks and you'll lose cache\r\n2. This creates for us chunks that we're not actually using. So for the same code I'll have the named entry chunk and I'll also have a chunk from the dynamic import. I'm not using the named entry-chunks but it's just noise to me.\r\nThat is even bigger when also using the ExtractTextPlugin.\r\n\r\nI looked also here: https://github.com/oieduardorabelo/webpack-commonschunkplugin-dynamic-splitting\r\nBut that seems to not be related since in our case the only real entry point (`application: [path.join(chunksPath, 'application_chunk')]`) is basically just loading polyfills + loading the `main` chunk path dynamically. Since all the `application` chunk is doing is mainly dynamically `import()` stuff it has no static imports of files from `node_modules`. So CommonChunkPlugin doesn't catch that..\r\n\r\n**Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.**\r\n\r\n* OS: macOS 10.12.3\r\n* Node.js version: 6.9.10\r\n* Webpack version: 2.2.1\r\n* Browser not relavant"},"comment":{"url":"https://api.github.com/repos/webpack/webpack/issues/comments/283264816","html_url":"https://github.com/webpack/webpack/issues/4392#issuecomment-283264816","issue_url":"https://api.github.com/repos/webpack/webpack/issues/4392","id":283264816,"user":{"login":"kazazor","id":1577655,"avatar_url":"https://avatars1.githubusercontent.com/u/1577655?v=3","gravatar_id":"","url":"https://api.github.com/users/kazazor","html_url":"https://github.com/kazazor","followers_url":"https://api.github.com/users/kazazor/followers","following_url":"https://api.github.com/users/kazazor/following{/other_user}","gists_url":"https://api.github.com/users/kazazor/gists{/gist_id}","starred_url":"https://api.github.com/users/kazazor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kazazor/subscriptions","organizations_url":"https://api.github.com/users/kazazor/orgs","repos_url":"https://api.github.com/users/kazazor/repos","events_url":"https://api.github.com/users/kazazor/events{/privacy}","received_events_url":"https://api.github.com/users/kazazor/received_events","type":"User","site_admin":false},"created_at":"2017-03-01T07:22:31Z","updated_at":"2017-03-01T07:22:31Z","body":"@sokra - do you refer to this PR: https://github.com/webpack/webpack/pull/4255 ?"}}
{"actor":{"display_login":"kazazor"}}