CINXE.COM
RIP CommonsChunkPlugin.md · GitHub
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-7aa84bb7e11e.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-f65db3e8d171.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-a8258e3c6dda.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-7e97d834719c.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-01d869f460be.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-534f3e971240.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-a8cc7d138001.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-35e9dfdc4f9f.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-cf4cc5f62dfe.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-d9abecd14f1e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-93aded0ee8a1.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-8bed0685a4b5.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-a954a02d9269.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_immersive_file_preview","copilot_new_references_ui","copilot_attach_folder_reference","copilot_personal_instructions","copilot_personal_instructions_templates","copilot_chat_repo_custom_instructions_preview","copilot_chat_retry_on_error","copilot_chat_persist_submitted_input","copilot_conversational_ux_history_refs","copilot_chat_shared_chat_input","copilot_editor_upsells","copilot_implicit_context","copilot_no_floating_button","copilot_smell_icebreaker_ux","copilot_read_shared_conversation","dotcom_chat_client_side_skills","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","github_models_o3_mini_streaming","hovercard_accessibility","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","issues_react_include_bots_in_pickers","marketing_pages_search_explore_provider","remove_child_patch","sample_network_conn_type","swp_enterprise_contact_form","site_copilot_extensions_ga","site_copilot_vscode_link_update","site_proxima_australia_update","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-ee26e1f14f5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-9da652f58479.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-3abb8f-d7e6bc799724.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-4600dbf2d60a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-f04cb2a9fc8c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-0dbb79f97f8f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-f6da4b3fa34c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-8e9f78-a74b4e0a8a6b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-78748950cb0c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-a1760ffda83d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_markdown-toolbar-element_dist_index_js-ceef33f593fa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-c44a69-8094ee2ecc5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-0b85275f2754.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-682f1551aebf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-72267f4e3ff9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-be8cb88f481b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-a4a1922eb55f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-e3cbe28f1638.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-e3180fe3bcb3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-69cfcc-e034679cfec3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-a1563f62660e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-f48a418a99d4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-8fa27fd7fbb6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-87a4ae-e2caa5390f5a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-783fc7e142e5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-32252a9260d6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-e12489347ccf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_hotkey_dist_index_js-524e40420665.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_remote-form_dist_-d0eef7-5f58a29a0546.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_form-utils_form-utils_ts-ui_packages_input-navigation-behavior_input-navigation-b-a97423-908328ee27af.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_diffs_blob-lines_ts-app_assets_modules_github_diffs_linkable-line-n-b8c0ea-b7945dd86942.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/gist-28c13361081c.js"></script> <title>RIP CommonsChunkPlugin.md · GitHub</title> <meta name="route-pattern" content="/:user_id/:gist_id(.:format)" data-turbo-transient> <meta name="route-controller" content="gists_gists" data-turbo-transient> <meta name="route-action" content="show" data-turbo-transient> <meta name="current-catalog-service-hash" content="56253a530ab9027b25719525dcbe6007461a3202218f6f5dfce5a601c121cbcb"> <meta name="request-id" content="D41E:A9CF3:26FE91:2E3447:67B8A0FC" data-pjax-transient="true"/><meta name="html-safe-nonce" content="f016a7eaf6d1ea8fdf28336f4323ba8da5ef918b381dd57269a36ff2e54d015d" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJENDFFOkE5Q0YzOjI2RkU5MToyRTM0NDc6NjdCOEEwRkMiLCJ2aXNpdG9yX2lkIjoiMzI2NjUzMjAxNDI5ODgwMDM4MCIsInJlZ2lvbl9lZGdlIjoic291dGhlYXN0YXNpYSIsInJlZ2lvbl9yZW5kZXIiOiJzb3V0aGVhc3Rhc2lhIn0=" data-pjax-transient="true"/><meta name="visitor-hmac" content="e3c5019571f6a979fee0bec4422e21e603808cec736c49ac8567c4939d79fa58" data-pjax-transient="true"/> <meta name="github-keyboard-shortcuts" content="copilot" data-turbo-transient="true" /> <meta name="selected-link" value="gist_code" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<gist-id>" data-turbo-transient="true" /><meta name="octolytics-location" content="/<user-name>/<gist-id>" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="GitHub Gist: instantly share code, notes, and snippets."> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch-gist.xml" title="Gist"> <link rel="fluid-icon" href="https://gist.github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693" /> <meta name="twitter:image" content="https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="RIP CommonsChunkPlugin.md" /><meta name="twitter:description" content="GitHub Gist: instantly share code, notes, and snippets." /> <meta property="og:image" content="https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png" /><meta property="og:image:alt" content="GitHub Gist: instantly share code, notes, and snippets." /><meta property="og:site_name" content="Gist" /><meta property="og:type" content="article" /><meta property="og:title" content="RIP CommonsChunkPlugin.md" /><meta property="og:url" content="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693" /><meta property="og:description" content="GitHub Gist: instantly share code, notes, and snippets." /><meta property="article:author" content="262588213843476" /><meta property="article:publisher" content="262588213843476" /> <meta name="hostname" content="gist.github.com"> <meta name="expected-hostname" content="gist.github.com"> <meta http-equiv="x-pjax-version" content="5fcd6ab0330adf50b7a44c85853955fc9e8f0dcf0ce37b500436cdb97658cfa1" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="1c71206221e00a0a8e77d94d48d954f34ddbd711c4a0ced954fd49cd786cfa61" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="662f907e0aefbdc8976139ce7f7e7b457458848f18543f0a64f4cf684e3e1c07" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <link href="/sokra.atom" rel="alternate" title="atom" type="application/atom+xml"> <meta name="robots" content="noindex, follow" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/gist-a35fdba7ad1d.css" /> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-9a5713772ca5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-af33445b6fc3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-f1bca44e0926.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-611691cca2f6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-2df2f32ec596.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-f7cc96ebae76.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-55fea94174bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-97496b0f52ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-c79a97a16b04.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.2b41f48ec06f29182cb4.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <div class="Header js-details-container Details flex-wrap flex-md-nowrap p-responsive" role="banner" > <div class="Header-item d-none d-md-flex"> <a class="Header-link" data-hotkey="g d" aria-label="Gist Homepage " href="/"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle d-inline-block d-md-none"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 68 24" version="1.1" width="68" data-view-component="true" class="octicon octicon-logo-github v-align-middle d-none d-md-inline-block"> <path d="M27.8 17.908h-.03c.013 0 .022.014.035.017l.01-.002-.016-.015Zm.005.017c-.14.001-.49.073-.861.073-1.17 0-1.575-.536-1.575-1.234v-4.652h2.385c.135 0 .24-.12.24-.283V9.302c0-.133-.12-.252-.24-.252H25.37V5.913c0-.119-.075-.193-.21-.193h-3.24c-.136 0-.21.074-.21.193V9.14s-1.636.401-1.741.416a.255.255 0 0 0-.195.253v2.021c0 .164.12.282.255.282h1.665v4.876c0 3.627 2.55 3.998 4.29 3.998.796 0 1.756-.252 1.906-.327.09-.03.135-.134.135-.238v-2.23a.264.264 0 0 0-.219-.265Zm35.549-3.272c0-2.69-1.095-3.047-2.25-2.928-.9.06-1.62.505-1.62.505v5.232s.735.506 1.83.536c1.545.044 2.04-.506 2.04-3.345ZM67 14.415c0 5.099-1.665 6.555-4.576 6.555-2.46 0-3.78-1.233-3.78-1.233s-.06.683-.135.773c-.045.089-.12.118-.21.118h-2.22c-.15 0-.286-.119-.286-.252l.03-16.514a.26.26 0 0 1 .255-.252h3.196a.26.26 0 0 1 .255.252v5.604s1.23-.788 3.03-.788l-.015-.03c1.8 0 4.456.67 4.456 5.767ZM53.918 9.05h-3.15c-.165 0-.255.119-.255.282v8.086s-.826.58-1.95.58c-1.126 0-1.456-.506-1.456-1.62v-7.06a.262.262 0 0 0-.255-.254h-3.21a.262.262 0 0 0-.256.253v7.596c0 3.27 1.846 4.087 4.381 4.087 2.085 0 3.78-1.145 3.78-1.145s.076.58.12.67c.03.074.136.133.24.133h2.011a.243.243 0 0 0 .255-.253l.03-11.103c0-.133-.12-.252-.285-.252Zm-35.556-.015h-3.195c-.135 0-.255.134-.255.297v10.91c0 .297.195.401.45.401h2.88c.3 0 .375-.134.375-.401V9.287a.262.262 0 0 0-.255-.252ZM16.787 4.01c-1.155 0-2.07.907-2.07 2.051 0 1.145.915 2.051 2.07 2.051a2.04 2.04 0 0 0 2.04-2.05 2.04 2.04 0 0 0-2.04-2.052Zm24.74-.372H38.36a.262.262 0 0 0-.255.253v6.08H33.14v-6.08a.262.262 0 0 0-.255-.253h-3.196a.262.262 0 0 0-.255.253v16.514c0 .133.135.252.255.252h3.196a.262.262 0 0 0 .255-.253v-7.06h4.966l-.03 7.06c0 .134.12.253.255.253h3.195a.262.262 0 0 0 .255-.253V3.892a.262.262 0 0 0-.255-.253Zm-28.31 7.313v8.532c0 .06-.015.163-.09.193 0 0-1.875 1.323-4.966 1.323C4.426 21 0 19.84 0 12.2S3.87 2.986 7.651 3c3.27 0 4.59.728 4.8.862.06.075.09.134.09.208l-.63 2.646c0 .134-.134.297-.3.253-.54-.164-1.35-.49-3.255-.49-2.205 0-4.575.623-4.575 5.543s2.25 5.5 3.87 5.5c1.38 0 1.875-.164 1.875-.164V13.94H7.321c-.165 0-.285-.12-.285-.253v-2.735c0-.134.12-.252.285-.252h5.61c.166 0 .286.118.286.252Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 38 24" version="1.1" width="38" data-view-component="true" class="octicon octicon-logo-gist v-align-middle d-none d-md-inline-block"> <path d="M7.05 13.095v-1.5h5.28v8.535c-1.17.555-2.925.96-5.385.96C1.665 21.09 0 17.055 0 12.045S1.695 3 6.945 3c2.43 0 3.96.495 4.92.99v1.575c-1.83-.75-3-1.095-4.92-1.095-3.855 0-5.22 3.315-5.22 7.59s1.365 7.575 5.205 7.575c1.335 0 2.97-.105 3.795-.51v-6.03H7.05Zm16.47 1.035h.045c3.33.3 4.125 1.425 4.125 3.345 0 1.815-1.14 3.615-4.71 3.615-1.125 0-2.745-.285-3.495-.585v-1.41c.705.255 1.83.54 3.495.54 2.43 0 3.09-1.035 3.09-2.13 0-1.065-.33-1.815-2.655-2.01-3.39-.3-4.095-1.5-4.095-3.12 0-1.665 1.08-3.465 4.38-3.465 1.095 0 2.34.135 3.375.585v1.41c-.915-.3-1.83-.54-3.405-.54-2.325 0-2.82.855-2.82 2.01 0 1.035.42 1.56 2.67 1.755Zm12.87-4.995v1.275h-3.63v7.305c0 1.425.795 2.01 2.25 2.01.3 0 .63 0 .915-.045v1.335c-.255.045-.75.075-1.035.075-1.965 0-3.75-.9-3.75-3.195v-7.5H28.8v-.72l2.34-.66V5.85l1.62-.465v3.75h3.63ZM16.635 9.09v9.615c0 .81.285 1.05 1.005 1.05v1.335c-1.71 0-2.58-.705-2.58-2.58V9.09h1.575Zm.375-3.495c0 .66-.51 1.17-1.17 1.17a1.14 1.14 0 0 1-1.155-1.17c0-.66.48-1.17 1.155-1.17s1.17.51 1.17 1.17Z"></path> </svg> </a> </div> <div class="Header-item d-md-none"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="Header-link js-details-target btn-link"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-three-bars"> <path d="M3.75 5.25a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Zm0 6a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Zm0 6a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Z"></path> </svg> </button> </div> <div class="Header-item Header-item--full js-site-search flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex"> <div class="header-search flex-self-stretch flex-md-self-auto mr-0 mr-md-3 mb-3 mb-md-0"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="position-relative js-quicksearch-form" role="search" aria-label="Site" data-turbo="false" action="/search" accept-charset="UTF-8" method="get"> <div class="header-search-wrapper form-control input-sm js-chromeless-input-container"> <input type="text" class="form-control input-sm js-site-search-focus header-search-input" data-hotkey="s,/" name="q" aria-label="Search" placeholder="Search…" autocorrect="off" autocomplete="off" autocapitalize="off"> </div> </form></div> <nav aria-label="Global" class="d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto"> <a class="Header-link mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, go to all gists, text:all gists" href="/discover">All gists</a> <a class="Header-link mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, go to GitHub, text:Back to GitHub" href="https://github.com">Back to GitHub</a> <a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, sign in" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="cd125d6e5a0f9630bc3ccb85efa116062104ad5742351439ac2048d5e87009a7" href="https://gist.github.com/auth/github?return_to=https%3A%2F%2Fgist.github.com%2Fsokra%2F1522d586b8e5c0f5072d7565c2bee693"> Sign in </a> <a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, sign up" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="03a806356e5895bb908c40fc65dbda80d69913f5bf1f9cdffaa0533f1ee4f2b8" href="/join?return_to=https%3A%2F%2Fgist.github.com%2Fsokra%2F1522d586b8e5c0f5072d7565c2bee693&source=header-gist"> Sign up </a></nav> </div> <div class="Header-item Header-item--full flex-justify-center d-md-none position-relative"> <a class="Header-link" data-hotkey="g d" aria-label="Gist Homepage " href="/"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle d-inline-block d-md-none"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 68 24" version="1.1" width="68" data-view-component="true" class="octicon octicon-logo-github v-align-middle d-none d-md-inline-block"> <path d="M27.8 17.908h-.03c.013 0 .022.014.035.017l.01-.002-.016-.015Zm.005.017c-.14.001-.49.073-.861.073-1.17 0-1.575-.536-1.575-1.234v-4.652h2.385c.135 0 .24-.12.24-.283V9.302c0-.133-.12-.252-.24-.252H25.37V5.913c0-.119-.075-.193-.21-.193h-3.24c-.136 0-.21.074-.21.193V9.14s-1.636.401-1.741.416a.255.255 0 0 0-.195.253v2.021c0 .164.12.282.255.282h1.665v4.876c0 3.627 2.55 3.998 4.29 3.998.796 0 1.756-.252 1.906-.327.09-.03.135-.134.135-.238v-2.23a.264.264 0 0 0-.219-.265Zm35.549-3.272c0-2.69-1.095-3.047-2.25-2.928-.9.06-1.62.505-1.62.505v5.232s.735.506 1.83.536c1.545.044 2.04-.506 2.04-3.345ZM67 14.415c0 5.099-1.665 6.555-4.576 6.555-2.46 0-3.78-1.233-3.78-1.233s-.06.683-.135.773c-.045.089-.12.118-.21.118h-2.22c-.15 0-.286-.119-.286-.252l.03-16.514a.26.26 0 0 1 .255-.252h3.196a.26.26 0 0 1 .255.252v5.604s1.23-.788 3.03-.788l-.015-.03c1.8 0 4.456.67 4.456 5.767ZM53.918 9.05h-3.15c-.165 0-.255.119-.255.282v8.086s-.826.58-1.95.58c-1.126 0-1.456-.506-1.456-1.62v-7.06a.262.262 0 0 0-.255-.254h-3.21a.262.262 0 0 0-.256.253v7.596c0 3.27 1.846 4.087 4.381 4.087 2.085 0 3.78-1.145 3.78-1.145s.076.58.12.67c.03.074.136.133.24.133h2.011a.243.243 0 0 0 .255-.253l.03-11.103c0-.133-.12-.252-.285-.252Zm-35.556-.015h-3.195c-.135 0-.255.134-.255.297v10.91c0 .297.195.401.45.401h2.88c.3 0 .375-.134.375-.401V9.287a.262.262 0 0 0-.255-.252ZM16.787 4.01c-1.155 0-2.07.907-2.07 2.051 0 1.145.915 2.051 2.07 2.051a2.04 2.04 0 0 0 2.04-2.05 2.04 2.04 0 0 0-2.04-2.052Zm24.74-.372H38.36a.262.262 0 0 0-.255.253v6.08H33.14v-6.08a.262.262 0 0 0-.255-.253h-3.196a.262.262 0 0 0-.255.253v16.514c0 .133.135.252.255.252h3.196a.262.262 0 0 0 .255-.253v-7.06h4.966l-.03 7.06c0 .134.12.253.255.253h3.195a.262.262 0 0 0 .255-.253V3.892a.262.262 0 0 0-.255-.253Zm-28.31 7.313v8.532c0 .06-.015.163-.09.193 0 0-1.875 1.323-4.966 1.323C4.426 21 0 19.84 0 12.2S3.87 2.986 7.651 3c3.27 0 4.59.728 4.8.862.06.075.09.134.09.208l-.63 2.646c0 .134-.134.297-.3.253-.54-.164-1.35-.49-3.255-.49-2.205 0-4.575.623-4.575 5.543s2.25 5.5 3.87 5.5c1.38 0 1.875-.164 1.875-.164V13.94H7.321c-.165 0-.285-.12-.285-.253v-2.735c0-.134.12-.252.285-.252h5.61c.166 0 .286.118.286.252Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 38 24" version="1.1" width="38" data-view-component="true" class="octicon octicon-logo-gist v-align-middle d-none d-md-inline-block"> <path d="M7.05 13.095v-1.5h5.28v8.535c-1.17.555-2.925.96-5.385.96C1.665 21.09 0 17.055 0 12.045S1.695 3 6.945 3c2.43 0 3.96.495 4.92.99v1.575c-1.83-.75-3-1.095-4.92-1.095-3.855 0-5.22 3.315-5.22 7.59s1.365 7.575 5.205 7.575c1.335 0 2.97-.105 3.795-.51v-6.03H7.05Zm16.47 1.035h.045c3.33.3 4.125 1.425 4.125 3.345 0 1.815-1.14 3.615-4.71 3.615-1.125 0-2.745-.285-3.495-.585v-1.41c.705.255 1.83.54 3.495.54 2.43 0 3.09-1.035 3.09-2.13 0-1.065-.33-1.815-2.655-2.01-3.39-.3-4.095-1.5-4.095-3.12 0-1.665 1.08-3.465 4.38-3.465 1.095 0 2.34.135 3.375.585v1.41c-.915-.3-1.83-.54-3.405-.54-2.325 0-2.82.855-2.82 2.01 0 1.035.42 1.56 2.67 1.755Zm12.87-4.995v1.275h-3.63v7.305c0 1.425.795 2.01 2.25 2.01.3 0 .63 0 .915-.045v1.335c-.255.045-.75.075-1.035.075-1.965 0-3.75-.9-3.75-3.195v-7.5H28.8v-.72l2.34-.66V5.85l1.62-.465v3.75h3.63ZM16.635 9.09v9.615c0 .81.285 1.05 1.005 1.05v1.335c-1.71 0-2.58-.705-2.58-2.58V9.09h1.575Zm.375-3.495c0 .66-.51 1.17-1.17 1.17a1.14 1.14 0 0 1-1.155-1.17c0-.66.48-1.17 1.155-1.17s1.17.51 1.17 1.17Z"></path> </svg> </a> </div> <div class="Header-item f4 mr-0" role="navigation" aria-label="Sign in or sign up"> <a class="Header-link no-underline mr-3" data-ga-click="Header, sign in" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="cd125d6e5a0f9630bc3ccb85efa116062104ad5742351439ac2048d5e87009a7" href="https://gist.github.com/auth/github?return_to=https%3A%2F%2Fgist.github.com%2Fsokra%2F1522d586b8e5c0f5072d7565c2bee693"> Sign in </a> <a class="Header-link d-inline-block no-underline border color-border-default rounded px-2 py-1" data-ga-click="Header, sign up" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="03a806356e5895bb908c40fc65dbda80d69913f5bf1f9cdffaa0533f1ee4f2b8" href="/join?return_to=https%3A%2F%2Fgist.github.com%2Fsokra%2F1522d586b8e5c0f5072d7565c2bee693&source=header-gist"> Sign up </a> </div> </div> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-dcc5dbe2-7816-4444-a164-2d4838d61e04" aria-labelledby="tooltip-0dc5b197-17d4-4fe5-8f71-cbdb3bc63505" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-0dc5b197-17d4-4fe5-8f71-cbdb3bc63505" for="icon-button-dcc5dbe2-7816-4444-a164-2d4838d61e04" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled > <div itemscope itemtype="http://schema.org/Code"> <main id="gist-pjax-container"> <div class="gist-detail-intro gist-banner pb-3"> <div class="text-center container-lg px-3"> <p class="lead"> Instantly share code, notes, and snippets. </p> </div> </div> <div class="gisthead pagehead pb-0 pt-3 mb-4"> <div class="px-0"> <div class="mb-3 d-flex px-3 px-md-3 px-lg-5"> <div class="flex-auto min-width-0 width-fit mr-3"> <div class="d-flex"> <div class="d-none d-md-block"> <a class="mr-2 flex-shrink-0" data-hovercard-type="user" data-hovercard-url="/users/sokra/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/sokra"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/1365881?s=64&v=4" width="32" height="32" alt="@sokra" /></a> </div> <div class="d-flex flex-column width-full"> <div class="d-flex flex-row width-full"> <h1 class="wb-break-word f3 text-normal mb-md-0 mb-1"> <span class="author"><a data-hovercard-type="user" data-hovercard-url="/users/sokra/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/sokra">sokra</a></span><!-- --><span class="mx-1 color-fg-muted">/</span><!-- --><strong itemprop="name" class="css-truncate-target mr-1" style="max-width: 410px"><a href="/sokra/1522d586b8e5c0f5072d7565c2bee693">RIP CommonsChunkPlugin.md</a></strong> <span title="Only those with the link can see this gist." data-view-component="true" class="Label v-align-middle"> Secret </span> </h1> </div> <div class="note m-0"> Last active <relative-time tense="past" datetime="2024-05-23T16:10:34Z" data-view-component="true">May 23, 2024 16:10</relative-time> </div> </div> </div> </div> <ul class="d-md-flex pagehead-actions float-none mr-2"> </ul> <div class="d-inline-block d-md-none ml-auto"> <action-menu data-select-variant="none" data-view-component="true" class="flex-self-start ml-auto d-inline-block"> <focus-group direction="vertical" mnemonics retain> <button id="gist_options-button" popovertarget="gist_options-overlay" aria-controls="gist_options-list" aria-haspopup="true" aria-labelledby="tooltip-4394250e-c828-4a51-b6ad-d7caf2bf6f41" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-4394250e-c828-4a51-b6ad-d7caf2bf6f41" for="gist_options-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Show Gist options</tool-tip> <anchored-position data-target="action-menu.overlay" id="gist_options-overlay" anchor="gist_options-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="gist_options-button" id="gist_options-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li rel="nofollow" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"DOWNLOAD_ZIP","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="fe0e807e9c8d1969a35964250295ec25393eefcc06bf2a53d1232c71a74e1317" data-ga-click="Gist, download zip, location:gist overview" data-targets="action-list.items" data-item-id="download_from_gist_options" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-faeb1c64-8f24-437f-a95e-bb43b9787890" href="/sokra/1522d586b8e5c0f5072d7565c2bee693/archive/9c8f9d3d0adc5a995e30dc4cf9d47270c1eedf4e.zip" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-download"> <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path><path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Download ZIP </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> </div> <ul class="d-md-flex d-none pagehead-actions float-none"> <li> <a id="gist-star-button" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Fsokra%2F1522d586b8e5c0f5072d7565c2bee693" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist star button","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="73d14ee65284fec670037723f71a3d689a5141909e364914683211f51c23cf3b" aria-label="You must be signed in to star a gist" data-view-component="true" class="btn-with-count Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-visual Button-leadingVisual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> </span> <span class="Button-label">Star</span> <span class="Button-visual Button-trailingVisual"> <span class="d-flex" aria-hidden="true"><span title="410" data-view-component="true" class="Counter">410</span></span> <span class="sr-only">(<span title="410" data-view-component="true" class="Counter">410</span>)</span> </span> </span> </a><tool-tip id="tooltip-5cf93c24-b8c6-450b-8ed7-17195a1b7723" for="gist-star-button" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to star a gist</tool-tip> </li> <li> <a id="gist-fork-button" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Fsokra%2F1522d586b8e5c0f5072d7565c2bee693" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist fork button","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="f0b943d84a51b101fdfa9d6ca4c4d2f90db84cb129011edd8de27c62ee5b3c75" aria-label="You must be signed in to fork a gist" data-view-component="true" class="btn-with-count Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-visual Button-leadingVisual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> </span> <span class="Button-label">Fork</span> <span class="Button-visual Button-trailingVisual"> <span class="d-flex" aria-hidden="true"><span title="31" data-view-component="true" class="Counter">31</span></span> <span class="sr-only">(<span title="31" data-view-component="true" class="Counter">31</span>)</span> </span> </span> </a><tool-tip id="tooltip-695bd8e8-69ff-47df-a630-53e5510196d0" for="gist-fork-button" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to fork a gist</tool-tip> </li> </ul> </div> <ul class="d-flex d-md-none px-3 mb-2 pagehead-actions float-none" > <li> <div data-view-component="true" class="flex-items-center d-inline-flex"> <action-menu data-menu-input="gist-share-url-sized-down" data-select-variant="single" data-dynamic-label="" data-view-component="true" class="flex-shrink-0"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-fb809840-449a-4b95-9abc-e97260cf77ca-button" popovertarget="action-menu-fb809840-449a-4b95-9abc-e97260cf77ca-overlay" aria-controls="action-menu-fb809840-449a-4b95-9abc-e97260cf77ca-list" aria-haspopup="true" type="button" data-view-component="true" class="rounded-right-0 border-right-0 Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Embed</span> </span> <span class="Button-visual Button-trailingAction"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </span> </button> <anchored-position data-target="action-menu.overlay" id="action-menu-fb809840-449a-4b95-9abc-e97260cf77ca-overlay" anchor="action-menu-fb809840-449a-4b95-9abc-e97260cf77ca-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-fb809840-449a-4b95-9abc-e97260cf77ca-button" id="action-menu-fb809840-449a-4b95-9abc-e97260cf77ca-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="<script src="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js"></script>" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"EMBED","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="5776cd338dc1b9f887639b93bc04142162bb853c5d93795eabf33853df459b3d" id="item-96920cfc-0a80-4af5-8ee6-7d64af93272d" type="button" role="menuitemradio" aria-checked="true" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Embed </span> <span data-view-component="true" class="ActionListItem-description">Embed this gist in your website.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"SHARE","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="95614609e6a5d92cf15afab6e0e5e48d61b1a4a550ad6c5dbc6d4a3b42f20b4e" id="item-76529f02-3039-4062-ad76-189f10ecf50a" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Share </span> <span data-view-component="true" class="ActionListItem-description">Copy sharable link for this gist.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/1522d586b8e5c0f5072d7565c2bee693.git" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"USE_HTTPS","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="e07dbb6e720407441df9329dc625bf81db92a1a7dec682a7675aefd5cc3f0ace" id="item-d58a2b5e-3bba-498d-a12b-862d183004f4" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Clone via HTTPS </span> <span data-view-component="true" class="ActionListItem-description">Clone using the web URL.</span> </span></button> </li> <li role="presentation" aria-hidden="true" data-view-component="true" class="ActionList-sectionDivider"></li> <li target="_blank" rel="noopener noreferrer" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-1842269a-1c79-4db1-92d1-3ed3ec2e3950" href="https://docs.github.com/articles/which-remote-url-should-i-use" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-question"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Learn more about clone URLs </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label for="gist-share-url-sized-down" class="sr-only FormControl-label"> Clone this repository at &lt;script src=&quot;https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js&quot;&gt;&lt;/script&gt; </label> <div class="FormControl-input-wrap FormControl-input-wrap--small"> <input id="gist-share-url-sized-down" aria-label="Clone this repository at &lt;script src=&quot;https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js&quot;&gt;&lt;/script&gt;" value="<script src="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js"></script>" readonly="readonly" data-autoselect="true" data-target="primer-text-field.inputElement " aria-describedby="validation-17049c8f-a282-4333-bc08-29eccd2c9704" class="form-control FormControl-monospace FormControl-input FormControl-small rounded-left-0 rounded-right-0 border-right-0" type="text" name="gist-share-url-sized-down" /> </div> <div class="FormControl-inlineValidation" id="validation-17049c8f-a282-4333-bc08-29eccd2c9704" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </primer-text-field> <span data-view-component="true"> <clipboard-copy id="clipboard-button" aria-label="Copy" for="gist-share-url-sized-down" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"COPY_URL","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="446a90ce7b8f0af02656bea23443ca0ecec97f4264db4dcecc0f6c9a9b6a4420" type="button" data-view-component="true" class="rounded-left-0 Button--secondary Button--small Button"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check color-fg-success"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </div> </li> <li> <button href="https://desktop.github.com" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"OPEN_IN_DESKTOP","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="55f9f21d555fe2d2ad10b6c4e07f2d2bb258a275d94a6d707d9eec06b225310b" data-platforms="windows,mac" id="icon-button-a1311cda-c800-4838-ac49-9b824e862baa" aria-labelledby="tooltip-57f83c59-944e-43c7-a28d-20a2a1fa0912" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small js-remove-unless-platform"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-desktop-download Button-visual"> <path d="m4.927 5.427 2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 5H8.75V.75a.75.75 0 1 0-1.5 0V5H5.104a.25.25 0 0 0-.177.427Z"></path><path d="M1.573 2.573a.25.25 0 0 0-.073.177v7.5a.25.25 0 0 0 .25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25h-3a.75.75 0 1 1 0-1.5h3A1.75 1.75 0 0 1 16 2.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.75.75 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5A1.75 1.75 0 0 1 1.75 1h3a.75.75 0 0 1 0 1.5h-3a.25.25 0 0 0-.177.073ZM6.982 12a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5H6.982Z"></path> </svg> </button><tool-tip id="tooltip-57f83c59-944e-43c7-a28d-20a2a1fa0912" for="icon-button-a1311cda-c800-4838-ac49-9b824e862baa" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Save sokra/1522d586b8e5c0f5072d7565c2bee693 to your computer and use it in GitHub Desktop.</tool-tip> </li> </ul> <div class="d-flex flex-md-row flex-column px-0 pr-md-3 px-lg-5"> <div class="flex-md-order-1 flex-order-2 flex-auto"> <nav class="UnderlineNav box-shadow-none px-3 px-lg-0" aria-label="Gist" data-pjax="#gist-pjax-container"> <div class="UnderlineNav-body"> <a class="js-selected-navigation-item selected UnderlineNav-item" data-pjax="true" data-hotkey="g c" aria-current="page" data-selected-links="gist_code /sokra/1522d586b8e5c0f5072d7565c2bee693" href="/sokra/1522d586b8e5c0f5072d7565c2bee693"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> Code </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g r" data-selected-links="gist_revisions /sokra/1522d586b8e5c0f5072d7565c2bee693/revisions" href="/sokra/1522d586b8e5c0f5072d7565c2bee693/revisions"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-commit UnderlineNav-octicon"> <path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"></path> </svg> Revisions <span title="4" data-view-component="true" class="Counter">4</span> </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g s" data-selected-links="gist_stars /sokra/1522d586b8e5c0f5072d7565c2bee693/stargazers" href="/sokra/1522d586b8e5c0f5072d7565c2bee693/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star UnderlineNav-octicon"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> Stars <span title="409" data-view-component="true" class="Counter">409</span> </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g f" data-selected-links="gist_forks /sokra/1522d586b8e5c0f5072d7565c2bee693/forks" href="/sokra/1522d586b8e5c0f5072d7565c2bee693/forks"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch UnderlineNav-octicon"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path> </svg> Forks <span title="31" data-view-component="true" class="Counter">31</span> </a> </div> </nav> </div> <div class="d-md-flex d-none flex-items-center flex-md-order-2 flex-order-1" data-multiple> <div data-view-component="true" class="flex-items-center d-inline-flex"> <action-menu data-menu-input="gist-share-url-original" data-select-variant="single" data-dynamic-label="" data-view-component="true" class="flex-shrink-0"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-86df774e-6b49-4017-9b4f-f3d9933695e2-button" popovertarget="action-menu-86df774e-6b49-4017-9b4f-f3d9933695e2-overlay" aria-controls="action-menu-86df774e-6b49-4017-9b4f-f3d9933695e2-list" aria-haspopup="true" type="button" data-view-component="true" class="rounded-right-0 border-right-0 Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Embed</span> </span> <span class="Button-visual Button-trailingAction"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </span> </button> <anchored-position data-target="action-menu.overlay" id="action-menu-86df774e-6b49-4017-9b4f-f3d9933695e2-overlay" anchor="action-menu-86df774e-6b49-4017-9b4f-f3d9933695e2-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-86df774e-6b49-4017-9b4f-f3d9933695e2-button" id="action-menu-86df774e-6b49-4017-9b4f-f3d9933695e2-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="<script src="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js"></script>" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"EMBED","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="5776cd338dc1b9f887639b93bc04142162bb853c5d93795eabf33853df459b3d" id="item-0af55402-e053-4744-9cb5-8a2e94db6605" type="button" role="menuitemradio" aria-checked="true" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Embed </span> <span data-view-component="true" class="ActionListItem-description">Embed this gist in your website.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"SHARE","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="95614609e6a5d92cf15afab6e0e5e48d61b1a4a550ad6c5dbc6d4a3b42f20b4e" id="item-d1a5a668-ab08-46df-b879-90d95db50c4e" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Share </span> <span data-view-component="true" class="ActionListItem-description">Copy sharable link for this gist.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/1522d586b8e5c0f5072d7565c2bee693.git" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"USE_HTTPS","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="e07dbb6e720407441df9329dc625bf81db92a1a7dec682a7675aefd5cc3f0ace" id="item-1acc41a8-1a51-4545-9ce6-0f070637a272" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Clone via HTTPS </span> <span data-view-component="true" class="ActionListItem-description">Clone using the web URL.</span> </span></button> </li> <li role="presentation" aria-hidden="true" data-view-component="true" class="ActionList-sectionDivider"></li> <li target="_blank" rel="noopener noreferrer" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-414ebeeb-e2d3-4e15-8f7d-3ee70e754c89" href="https://docs.github.com/articles/which-remote-url-should-i-use" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-question"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Learn more about clone URLs </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label for="gist-share-url-original" class="sr-only FormControl-label"> Clone this repository at &lt;script src=&quot;https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js&quot;&gt;&lt;/script&gt; </label> <div class="FormControl-input-wrap FormControl-input-wrap--small"> <input id="gist-share-url-original" aria-label="Clone this repository at &lt;script src=&quot;https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js&quot;&gt;&lt;/script&gt;" value="<script src="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.js"></script>" readonly="readonly" data-autoselect="true" data-target="primer-text-field.inputElement " aria-describedby="validation-e997bf12-02f0-4d8f-8c8e-bce168e15f20" class="form-control FormControl-monospace FormControl-input FormControl-small rounded-left-0 rounded-right-0 border-right-0" type="text" name="gist-share-url-original" /> </div> <div class="FormControl-inlineValidation" id="validation-e997bf12-02f0-4d8f-8c8e-bce168e15f20" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </primer-text-field> <span data-view-component="true"> <clipboard-copy id="clipboard-button" aria-label="Copy" for="gist-share-url-original" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"COPY_URL","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="446a90ce7b8f0af02656bea23443ca0ecec97f4264db4dcecc0f6c9a9b6a4420" type="button" data-view-component="true" class="rounded-left-0 Button--secondary Button--small Button"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check color-fg-success"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </div> <div class="ml-2"> <button href="https://desktop.github.com" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"OPEN_IN_DESKTOP","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="55f9f21d555fe2d2ad10b6c4e07f2d2bb258a275d94a6d707d9eec06b225310b" data-platforms="windows,mac" id="icon-button-a37c1e41-7ba3-42dc-ad22-50329cdb876c" aria-labelledby="tooltip-2d1ea8ae-1f4c-429b-9314-72f2b0b5f145" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small js-remove-unless-platform"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-desktop-download Button-visual"> <path d="m4.927 5.427 2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 5H8.75V.75a.75.75 0 1 0-1.5 0V5H5.104a.25.25 0 0 0-.177.427Z"></path><path d="M1.573 2.573a.25.25 0 0 0-.073.177v7.5a.25.25 0 0 0 .25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25h-3a.75.75 0 1 1 0-1.5h3A1.75 1.75 0 0 1 16 2.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.75.75 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5A1.75 1.75 0 0 1 1.75 1h3a.75.75 0 0 1 0 1.5h-3a.25.25 0 0 0-.177.073ZM6.982 12a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5H6.982Z"></path> </svg> </button><tool-tip id="tooltip-2d1ea8ae-1f4c-429b-9314-72f2b0b5f145" for="icon-button-a37c1e41-7ba3-42dc-ad22-50329cdb876c" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Save sokra/1522d586b8e5c0f5072d7565c2bee693 to your computer and use it in GitHub Desktop.</tool-tip> </div> <div class="ml-2"> <a class="btn btn-sm" rel="nofollow" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"DOWNLOAD_ZIP","git_repository_type":"GIST","gist_id":85730166,"originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="fe0e807e9c8d1969a35964250295ec25393eefcc06bf2a53d1232c71a74e1317" data-ga-click="Gist, download zip, location:gist overview" href="/sokra/1522d586b8e5c0f5072d7565c2bee693/archive/9c8f9d3d0adc5a995e30dc4cf9d47270c1eedf4e.zip">Download ZIP</a> </div> </div> </div> </div> </div> <div class="container-lg px-3"> <div class="repository-content gist-content" > <div> <div class="js-gist-file-update-container js-task-list-container"> <div id="file-rip-commonschunkplugin-md" class="file my-2"> <div class="file-header d-flex flex-md-items-center flex-items-start"> <div class="file-actions flex-order-2 pt-0"> <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693/raw/9c8f9d3d0adc5a995e30dc4cf9d47270c1eedf4e/RIP%2520CommonsChunkPlugin.md" data-view-component="true" class="Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Raw</span> </span> </a> </div> <div class="file-info pr-4 d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto"> <span class="mr-1"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square color-fg-muted"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <a class="wb-break-all" href="#file-rip-commonschunkplugin-md"> <strong class="user-select-contain gist-blob-name css-truncate-target"> RIP CommonsChunkPlugin.md </strong> </a> </div> </div> <div id="file-rip-commonschunkplugin-md-readme" class="Box-body readme blob p-5 p-xl-6 gist-border-0" style="overflow: auto" tabindex="0" role="region" aria-label="file-rip-commonschunkplugin-md" > <article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h1 class="heading-element" dir="auto">RIP CommonsChunkPlugin</h1><a id="user-content-rip-commonschunkplugin" class="anchor" aria-label="Permalink: RIP CommonsChunkPlugin" href="#rip-commonschunkplugin"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">webpack 4 removes the CommonsChunkPlugin in favor of two new options (<code>optimization.splitChunks</code> and <code>optimization.runtimeChunk</code>). Here is how it works.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Defaults</h2><a id="user-content-defaults" class="anchor" aria-label="Permalink: Defaults" href="#defaults"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">By default it now does some optimizations that should work great for most users.</p> <p dir="auto">Note: The defaults only affect on-demand chunks, because changing initial chunks would affect the script tags in the HTML. If you can handle this (i. e. when generating the script tags from the entrypoints in stats) you can enable these default optimizations for initial chunks too with <code>optimization.splitChunks.chunks: "all"</code>.</p> <p dir="auto">webpack automatically splits chunks based on these conditions:</p> <ul dir="auto"> <li>New chunk can be shared OR modules are from the <code>node_modules</code> folder</li> <li>New chunk would be bigger than 30kb (before min+gz)</li> <li>Maximum number of parallel request when loading chunks on demand would be lower or equal to 5</li> <li>Maximum number of parallel request at initial page load would be lower or equal to 3</li> </ul> <p dir="auto">When trying to fullfill the last two conditions, bigger chunks are preferred.</p> <p dir="auto">Let's take a look at some examples.</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Example 1</h3><a id="user-content-example-1" class="anchor" aria-label="Permalink: Example 1" href="#example-1"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-source-js" dir="auto"><pre><span class="pl-c">// entry.js</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">"./a"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js" dir="auto"><pre><span class="pl-c">// a.js</span> <span class="pl-k">import</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span> <span class="pl-c">// ...</span></pre></div> <p dir="auto">Result: A separate chunk would be created containing react. At the import call this chunk is loaded in parallel to the original chunk containing <code>./a</code>.</p> <p dir="auto">Why:</p> <ul dir="auto"> <li>Condition 1: The chunk contains modules from <code>node_modules</code></li> <li>Condition 2: react is bigger than 30kb</li> <li>Condition 3: Number of parallel requests at the import call is 2</li> <li>Condition 4: Doesn't affect request at initial page load</li> </ul> <p dir="auto">Why does this make sense?</p> <p dir="auto">react probably doesn't change very often compared to your application code. By moving it into a separate chunk this chunk can be cached separately from your app code (assuming you are using Long Term Caching: chunkhash, records, Cache-Control).</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Example 2</h3><a id="user-content-example-2" class="anchor" aria-label="Permalink: Example 2" href="#example-2"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-source-js" dir="auto"><pre><span class="pl-c">// entry.js</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">"./a"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">"./b"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js" dir="auto"><pre><span class="pl-c">// a.js</span> <span class="pl-k">import</span> <span class="pl-s">"./helpers"</span><span class="pl-kos">;</span> <span class="pl-c">// helpers is 40kb in size</span> <span class="pl-c">// ...</span></pre></div> <div class="highlight highlight-source-js" dir="auto"><pre><span class="pl-c">// b.js</span> <span class="pl-k">import</span> <span class="pl-s">"./helpers"</span><span class="pl-kos">;</span> <span class="pl-k">import</span> <span class="pl-s">"./more-helpers"</span><span class="pl-kos">;</span> <span class="pl-c">// more-helpers is also 40kb in size</span> <span class="pl-c">// ...</span></pre></div> <p dir="auto">Result: A separate chunk would be created containing <code>./helpers</code> and all dependencies of it. At the import calls this chunk is loaded in parallel to the original chunks.</p> <p dir="auto">Why:</p> <ul dir="auto"> <li>Condition 1: The chunk is shared between both import calls</li> <li>Condition 2: helpers is bigger than 30kb</li> <li>Condition 3: Number of parallel requests at the import calls is 2</li> <li>Condition 4: Doesn't affect request at initial page load</li> </ul> <p dir="auto">Why does this make sense?</p> <p dir="auto">Putting the helpers code into each chunk may means it need to downloaded twice by the user. By using a separate chunk it's only downloaded once. Actually it's a tradeoff, because now we pay the cost of an additional request. That's why there is a minimum size of 30kb.</p> <hr> <p dir="auto">With <code>optimizations.splitChunks.chunks: "all"</code> the same would happend for initial chunks. Chunks can even be shared between entrypoints and on-demand loading.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Configuration</h2><a id="user-content-configuration" class="anchor" aria-label="Permalink: Configuration" href="#configuration"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">For these people that like to have more control over this functionality, there are a lot of options to fit it to your needs.</p> <p dir="auto">Disclaimer: Don't try to optimize manually without measuring. The defaults are choosen to fit best practices of web performance.</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Cache Groups</h3><a id="user-content-cache-groups" class="anchor" aria-label="Permalink: Cache Groups" href="#cache-groups"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The optimization assigns modules to cache groups.</p> <p dir="auto">The defaults assigns all modules from <code>node_modules</code> to a cache group called <code>vendors</code> and all modules duplicated in at least 2 chunks to a change group <code>default</code>.</p> <p dir="auto">A module can be assigned to multiple cache groups. The optimization then prefers the cache group with the higher <code>priority</code> (<code>priority</code> option) or that one that forms bigger chunks.</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Conditions</h3><a id="user-content-conditions" class="anchor" aria-label="Permalink: Conditions" href="#conditions"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Modules from the same chunks and cache group will form a new chunk when all conditions are fullfilled.</p> <p dir="auto">There are 4 options to configure the conditions:</p> <ul dir="auto"> <li><code>minSize</code> (default: 30000) Minimum size for a chunk.</li> <li><code>minChunks</code> (default: 1) Minimum number of chunks that share a module before splitting</li> <li><code>maxInitialRequests</code> (default 3) Maximum number of parallel requests at an entrypoint</li> <li><code>maxAsyncRequests</code> (default 5) Maximum number of parallel requests at on-demand loading</li> </ul> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Naming</h3><a id="user-content-naming" class="anchor" aria-label="Permalink: Naming" href="#naming"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">To control the chunk name of the split chunk the <code>name</code> option can be used.</p> <p dir="auto">Note: When assigning equal names to different split chunks they are merged together. This can be used i. e. to put all vendor modules into a single chunk shared by all other entrypoints/splitpoints, but I don't recommend doing so. This can lead to more code downloaded than needed.</p> <p dir="auto">The magic value <code>true</code> automatically chooses a name based on chunks and cache group key. Elsewise a string or function can be passed.</p> <p dir="auto">When the name matches an entrypoint name, the entrypoint is removed.</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Select chunks</h3><a id="user-content-select-chunks" class="anchor" aria-label="Permalink: Select chunks" href="#select-chunks"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">With the <code>chunks</code> option the selected chunks can be configured. There are 3 values possible <code>"initial"</code>, <code>"async"</code> and <code>"all"</code>. When configured the optimization only selects initial chunks, on-demand chunks or all chunks.</p> <p dir="auto">The option <code>reuseExistingChunk</code> allows to reuse existing chunks instead of creating a new one when modules match exactly.</p> <p dir="auto">This can be controlled per cache group.</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Select modules</h3><a id="user-content-select-modules" class="anchor" aria-label="Permalink: Select modules" href="#select-modules"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The <code>test</code> option controls which modules are selected by this cache group. Omitting it selects all modules. It can be a RegExp, string or function.</p> <p dir="auto">It can match the absolute module resource path or chunk names. When a chunk name is matched, all modules in this chunk are selected.</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Configurate cache groups</h3><a id="user-content-configurate-cache-groups" class="anchor" aria-label="Permalink: Configurate cache groups" href="#configurate-cache-groups"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">This is the default configuration:</p> <div class="highlight highlight-source-js" dir="auto"><pre>splitChunks: <span class="pl-kos">{</span> <span class="pl-c1">chunks</span>: <span class="pl-s">"async"</span><span class="pl-kos">,</span> <span class="pl-c1">minSize</span>: <span class="pl-c1">30000</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">maxAsyncRequests</span>: <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">maxInitialRequests</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">name</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">default</span>: <span class="pl-kos">{</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-c1">-</span><span class="pl-c1">20</span> <span class="pl-s1">reuseExistingChunk</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">vendors</span>: <span class="pl-kos">{</span> <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span><span class="pl-s">n</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">e</span><span class="pl-s">_</span><span class="pl-s">m</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">u</span><span class="pl-s">l</span><span class="pl-s">e</span><span class="pl-s">s</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-c1">-</span><span class="pl-c1">10</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">By default cache groups inherit options from <code>splitChunks.*</code>, but <code>test</code>, <code>priority</code> and <code>reuseExistingChunk</code> can only be configured on cache group level.</p> <p dir="auto"><code>cacheGroups</code> is an object where keys are cache group keys and values are options:</p> <p dir="auto">Otherwise all options from the options listed above are possible: <code>chunks</code>, <code>minSize</code>, <code>minChunks</code>, <code>maxAsyncRequests</code>, <code>maxInitialRequests</code>, <code>name</code>.</p> <p dir="auto">To disable the default groups pass <code>false</code>: <code>optimization.splitChunks.cacheGroups.default: false</code></p> <p dir="auto">The priority of the default groups are negative so any custom cache group takes higher priority (default 0).</p> <p dir="auto">Here are some examples and their effect:</p> <div class="highlight highlight-source-js" dir="auto"><pre>splitChunks: <span class="pl-kos">{</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">commons</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">"commons"</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-s">"initial"</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">Create a <code>commons</code> chunk, which includes all code shared between entrypoints.</p> <p dir="auto">Note: This downloads more code than neccessary.</p> <div class="highlight highlight-source-js" dir="auto"><pre>splitChunks: <span class="pl-kos">{</span> cacheGroups: <span class="pl-kos">{</span> commons: <span class="pl-kos">{</span> test: <span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span><span class="pl-s">n</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">e</span><span class="pl-s">_</span><span class="pl-s">m</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">u</span><span class="pl-s">l</span><span class="pl-s">e</span><span class="pl-s">s</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span> name: <span class="pl-s">"vendors"</span><span class="pl-kos">,</span> <span class="pl-s1">chunks</span>: <span class="pl-s">"all"</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">Create a <code>vendors</code> chunk, which includes all code from node_modules in the whole application.</p> <p dir="auto">Note: This downloads more code than neccessary.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto"><code>optimization.runtimeChunk</code></h2><a id="user-content-optimizationruntimechunk" class="anchor" aria-label="Permalink: optimization.runtimeChunk" href="#optimizationruntimechunk"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><code>optimization.runtimeChunk: true</code> adds an additonal chunk to each entrypoint containing only the runtime.</p> </article> </div> </div> </div> <a name="comments"></a> <div class="js-quote-selection-container" data-quote-markdown=".js-comment-body"> <div class="js-discussion " > <div class="ml-md-6 pl-md-3 ml-0 pl-0"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="ajax-pagination-form js-ajax-pagination" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/load_comments" accept-charset="UTF-8" method="get"> <input type="hidden" name="partial" id="partial" value="gists/timeline_marker" autocomplete="off" class="form-control" /> <input type="hidden" name="before_comment_id" id="before_comment_id" value="2380397" autocomplete="off" class="form-control" /> <input type="hidden" name="mark_as_unread" id="mark_as_unread" value="0" autocomplete="off" class="form-control" /> <button name="button" type="submit" class="ajax-pagination-btn" data-disable-with="Loading...">Load earlier comments...</button> </form> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/creage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/creage"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/910967?s=80&v=4" width="40" height="40" alt="@creage" /></a> </div> <div id="gistcomment-2380397" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2380397-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/creage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/creage">creage</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2380397#gistcomment-2380397" id="gistcomment-2380397-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-14T14:44:10Z" class="no-wrap">Mar 14, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Could someone please advice what config should I use in Webpack4 to get same results as Webpack3 gave with</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">deepChildren</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">async</span>: <span class="pl-s">'common'</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span> <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div> <p dir="auto">As my bundles had no overlaps on V3, and on V4 my overlapping is terrible <code class="notranslate">1186 files were bundled into 56 bundles. Of those, 34 bundles have overlaps</code>. Tried different options, but can't get the same result.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2380397" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="c6h91RZmy9zyLpefOcaYrnHq0wi-nrivXAp443eOltrNa8e8DEeSKFDo5Y1josU6Nfp0HUJI9ThwOYoRKtZqeA" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2380397/edit_form?textarea_id=gistcomment-2380397-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/TheLarkInn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/TheLarkInn"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/3408176?s=80&v=4" width="40" height="40" alt="@TheLarkInn" /></a> </div> <div id="gistcomment-2381967" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2381967-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/TheLarkInn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/TheLarkInn">TheLarkInn</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2381967#gistcomment-2381967" id="gistcomment-2381967-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-15T17:24:29Z" class="no-wrap">Mar 15, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/nirvinm/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/nirvinm">@nirvinm</a> compilation.stats will contain the chunkGraph information including which chunks have parents/children (which determines order)</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2381967" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="E60pkc9Bejvccdc2bs324BXHJwQx4LtJuq26bwzmawnU9AV26LkOZIBiPm_omUOu9FAmTe_wnzj_zo879zSsiw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2381967/edit_form?textarea_id=gistcomment-2381967-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/christianhg/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/christianhg"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/4602382?s=80&v=4" width="40" height="40" alt="@christianhg" /></a> </div> <div id="gistcomment-2382986" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2382986-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/christianhg/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/christianhg">christianhg</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2382986#gistcomment-2382986" id="gistcomment-2382986-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-16T14:29:18Z" class="no-wrap">Mar 16, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Using webpack 3 and CommonsChunkPlugin I'm making sure none of my entries copy anything from one another. It might be a peculiar use case, but it's what I need right now for this project. I looks something like this:</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">entry</span>: <span class="pl-kos">{</span> <span class="pl-c1">core</span>: <span class="pl-s">'./src/core/index.js'</span><span class="pl-kos">,</span> <span class="pl-c1">add</span>: <span class="pl-s">'./src/plugins/add/index.js'</span><span class="pl-kos">,</span> <span class="pl-c1">bar</span>: <span class="pl-s">'./src/plugins/bar/index.js'</span><span class="pl-kos">,</span> <span class="pl-c1">foo</span>: <span class="pl-s">'./src/plugins/foo/index.js'</span><span class="pl-kos">,</span> <span class="pl-c1">subtract</span>: <span class="pl-s">'./src/plugins/subtract/index.js'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span> <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c">// All chunk names have to be listed here. They are ordered a the way</span> <span class="pl-c">// that any chunk dependency needs to be listed after the chunk that</span> <span class="pl-c">// depends on it. Chunks with many dependencies are in the beginning of</span> <span class="pl-c">// the array and chunks with no dependencies are in the end.</span> <span class="pl-c1">names</span>: <span class="pl-kos">[</span><span class="pl-s">'bar'</span><span class="pl-kos">,</span> <span class="pl-s">'foo'</span><span class="pl-kos">,</span> <span class="pl-s">'add'</span><span class="pl-kos">,</span> <span class="pl-s">'subtract'</span><span class="pl-kos">,</span> <span class="pl-s">'core'</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">]</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">Is it possible to reach a similar output with webpack 4?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2382986" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="o8Faqbq-Alfpd3uWjoMt2SWbcnpxBLh25H_lDGBCU8tsbxON7LMFQDhXCE8L2BDDakadjsRxn7F--QBIA4bqXQ" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2382986/edit_form?textarea_id=gistcomment-2382986-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/leuvi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/leuvi"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/7973914?s=80&v=4" width="40" height="40" alt="@leuvi" /></a> </div> <div id="gistcomment-2383227" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2383227-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/leuvi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/leuvi">leuvi</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2383227#gistcomment-2383227" id="gistcomment-2383227-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-16T18:24:41Z" class="no-wrap">Mar 16, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I have the same problem as you <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/l0gicgate/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/l0gicgate">@l0gicgate</a></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2383227" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="ZAZuWLp-V_cCgQcU_wRd0qvMru5rbmufWhxLtQrZdn26P4H_p5pJirtNk95JQh-1gRW91993yTt4H5D-HFej9g" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2383227/edit_form?textarea_id=gistcomment-2383227-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/dtothefp/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/dtothefp"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/4656726?s=80&v=4" width="40" height="40" alt="@dtothefp" /></a> </div> <div id="gistcomment-2383328" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2383328-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/dtothefp/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/dtothefp">dtothefp</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2383328#gistcomment-2383328" id="gistcomment-2383328-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-16T20:24:05Z" class="no-wrap">Mar 16, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I'm upgrading from Webpack v2 to Webpack v4. I'm using mini-css-extract-plugin to replace extract-text-webpack-plugin. Previously I was using <code class="notranslate">require.ensure</code> to create multiple JS chunks but CSS modules imported into chunks were creating only a single CSS file. I'd like to maintain this functionality but I cannot seem to create a single CSS chunk. Tried the config below but it's not doing anything 🤷♂️</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"> <span class="pl-s1">optimization</span>: <span class="pl-kos">{</span> <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">commons</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'commons'</span><span class="pl-kos">,</span> <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-s">c</span><span class="pl-s">s</span><span class="pl-s">s</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'all'</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2383328" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="rfJjR46Td8qlwrZdb1YpxCxptcLvswlqx1bKitnyLY3dTXvSfPkAkAM6hvY5l0KLxDnbX6VtD57rz_bn-2injQ" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2383328/edit_form?textarea_id=gistcomment-2383328-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mnpenner/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mnpenner"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/1112998?s=80&v=4" width="40" height="40" alt="@mnpenner" /></a> </div> <div id="gistcomment-2383478" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2383478-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/mnpenner/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mnpenner">mnpenner</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2383478#gistcomment-2383478" id="gistcomment-2383478-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-16T22:52:44Z" class="no-wrap">Mar 16, 2018</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjM4MzQ3OA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/TheLarkInn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/TheLarkInn">@TheLarkInn</a> Where is this <code class="notranslate">chunkGraph</code> you speak of?</p> <p dir="auto">I found <code class="notranslate">assets.compilation.chunkGroups.0.chunks.0.files</code> -- is that guaranteed to be in the proper order for inserting into HTML?</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1112998/37547914-ae3ced92-2931-11e8-8f00-6bce8ee23a45.png"><img src="https://user-images.githubusercontent.com/1112998/37547914-ae3ced92-2931-11e8-8f00-6bce8ee23a45.png" alt="image" style="max-width: 100%;"></a></p> <p dir="auto">Specifically, something like this:</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-kos">{</span> <span class="pl-en">apply</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">compiler</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">compiler</span><span class="pl-kos">.</span><span class="pl-en">plugin</span><span class="pl-kos">(</span><span class="pl-s">'done'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">stats</span><span class="pl-kos">,</span> <span class="pl-s1">done</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">let</span> <span class="pl-s1">assets</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-k">for</span><span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">chunkGroup</span> <span class="pl-k">of</span> <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">compilation</span><span class="pl-kos">.</span><span class="pl-c1">chunkGroups</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-s1">chunkGroup</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">let</span> <span class="pl-s1">files</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-k">for</span><span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">chunk</span> <span class="pl-k">of</span> <span class="pl-s1">chunkGroup</span><span class="pl-kos">.</span><span class="pl-c1">chunks</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">files</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span>...<span class="pl-s1">chunk</span><span class="pl-kos">.</span><span class="pl-c1">files</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-s1">assets</span><span class="pl-kos">[</span><span class="pl-s1">chunkGroup</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">files</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-s1">fs</span><span class="pl-kos">.</span><span class="pl-en">writeFile</span><span class="pl-kos">(</span><span class="pl-s">'webpack.stats.json'</span><span class="pl-kos">,</span> <span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">assetsByChunkName</span>: <span class="pl-s1">assets</span><span class="pl-kos">,</span> <span class="pl-c1">publicPath</span>: <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">compilation</span><span class="pl-kos">.</span><span class="pl-c1">outputOptions</span><span class="pl-kos">.</span><span class="pl-c1">publicPath</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">done</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <p dir="auto">Will spit out this JSON:</p> <div class="highlight highlight-source-json" dir="auto"><pre class="notranslate">{ <span class="pl-ent">"assetsByChunkName"</span>: { <span class="pl-ent">"main"</span>: [ <span class="pl-s"><span class="pl-pds">"</span>runtime~main.a23dfea309e23d13bfcb.js<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>runtime~main.a23dfea309e23d13bfcb.js.map<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.81da97be08338e4f2807.css<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.81da97be08338e4f2807.js<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.81da97be08338e4f2807.css.map<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.81da97be08338e4f2807.js.map<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.d68430785367f8475580.css<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.d68430785367f8475580.js<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.d68430785367f8475580.css.map<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.d68430785367f8475580.js.map<span class="pl-pds">"</span></span> ], <span class="pl-ent">"print"</span>: [ <span class="pl-s"><span class="pl-pds">"</span>runtime~print.a22d41d203e00584dadd.js<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>runtime~print.a22d41d203e00584dadd.js.map<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.00ae08b2c535eb95bb2e.css<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.00ae08b2c535eb95bb2e.js<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.00ae08b2c535eb95bb2e.css.map<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>chunk.00ae08b2c535eb95bb2e.js.map<span class="pl-pds">"</span></span> ] }, <span class="pl-ent">"publicPath"</span>: <span class="pl-s"><span class="pl-pds">"</span>/assets/<span class="pl-pds">"</span></span> }</pre></div> <p dir="auto">Which should be easily parseable in your language of choice.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2383478" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="g6OXJ5IDTY6906RFLxaXykuEejIMDPydHSWZhBn8kjkuNYe9GROBL9K7TCdCZiUARF4GV_8YHYLXr2WUQP1zxQ" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2383478/edit_form?textarea_id=gistcomment-2383478-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/jtomaszewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jtomaszewski"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/1862580?s=80&v=4" width="40" height="40" alt="@jtomaszewski" /></a> </div> <div id="gistcomment-2385343" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2385343-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/jtomaszewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jtomaszewski">jtomaszewski</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2385343#gistcomment-2385343" id="gistcomment-2385343-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-19T14:30:26Z" class="no-wrap">Mar 19, 2018</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjM4NTM0Mw==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">FYI: Documentation for SplitChunksPlugin which is currently <a href="https://github.com/webpack/webpack.js.org/blob/fe1e627a1cad445c01a7f13f61ae1400dea7c399/src/content/plugins/split-chunks-plugin.md">in progress</a> was very helpful to us during migration from webpack 3 to webpack 4.</p> <p dir="auto">Here's how we migrated our chunks configuration while keeping the same functionality as we had before:</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-c">// BEFORE (webpack 3)</span> <span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">entry</span>: <span class="pl-kos">{</span> <span class="pl-c1">app</span>: <span class="pl-kos">[</span><span class="pl-s">'./src/ng2/app.module'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">main</span>: <span class="pl-kos">[</span><span class="pl-s">'./src/main-admin'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span> <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'vendors'</span><span class="pl-kos">,</span> <span class="pl-en">minChunks</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span> <span class="pl-c1">&&</span> <span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">'node_modules'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">'vendor'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'commons'</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-kos">[</span><span class="pl-s">'app'</span><span class="pl-kos">,</span> <span class="pl-s">'main'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-en">minChunks</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span> <span class="pl-c1">&&</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">'src'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-c">// AFTER (webpack 4)</span> <span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">entry</span>: <span class="pl-kos">{</span> <span class="pl-c1">main</span>: <span class="pl-kos">[</span> <span class="pl-s">'./src/ng2/app.module'</span><span class="pl-kos">,</span> <span class="pl-s">'./src/main-admin'</span><span class="pl-kos">,</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span> <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'all'</span><span class="pl-kos">,</span> <span class="pl-c1">minSize</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">maxAsyncRequests</span>: <span class="pl-v">Infinity</span><span class="pl-kos">,</span> <span class="pl-c1">maxInitialRequests</span>: <span class="pl-v">Infinity</span><span class="pl-kos">,</span> <span class="pl-c1">name</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">default</span>: <span class="pl-kos">{</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'async'</span><span class="pl-kos">,</span> <span class="pl-c1">minSize</span>: <span class="pl-c1">30000</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">maxAsyncRequests</span>: <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">maxInitialRequests</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-c1">-</span><span class="pl-c1">20</span><span class="pl-kos">,</span> <span class="pl-c1">reuseExistingChunk</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">vendors</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'vendors'</span><span class="pl-kos">,</span> <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-en">test</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span> <span class="pl-c1">&&</span> <span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">'node_modules'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">'vendor'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-c1">-</span><span class="pl-c1">10</span><span class="pl-kos">,</span> <span class="pl-c1">reuseExistingChunk</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">commons</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'commons'</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'initial'</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-en">test</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span> <span class="pl-c1">&&</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">.</span><span class="pl-en">startsWith</span><span class="pl-kos">(</span><span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">'src'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-c1">-</span><span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">reuseExistingChunk</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2385343" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="csAo0F9-7xW4pCNwrNBffOXkTO_eGhdh_sgDGPdyHLn7__DOy5thbMv6Bhcuq2myZoD6VeAtO6NXU7iTMZUX1g" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2385343/edit_form?textarea_id=gistcomment-2385343-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/alexcheuk/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/alexcheuk"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/1242663?s=80&v=4" width="40" height="40" alt="@alexcheuk" /></a> </div> <div id="gistcomment-2388420" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2388420-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/alexcheuk/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/alexcheuk">alexcheuk</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2388420#gistcomment-2388420" id="gistcomment-2388420-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-22T01:56:23Z" class="no-wrap">Mar 22, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Does anyone know if this is a bug or a Webpack 4 change?</p> <p dir="auto">for the option <code class="notranslate">output.chunkFilename</code> the docs says</p> <blockquote> <p dir="auto">This option determines the name of non-entry chunk files</p> </blockquote> <p dir="auto">In Webpack 4 this works properly as expect. <strong>Unless</strong> you split the runtimeChunk into a seperate file.</p> <p dir="auto">So using this config</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">output</span>: <span class="pl-kos">{</span> <span class="pl-c1">publicPath</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">production</span><span class="pl-kos">.</span><span class="pl-c1">publicPath</span><span class="pl-kos">,</span> <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span> <span class="pl-c1">chunkFilename</span>: <span class="pl-s">'[name].[chunkhash].js'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span> <span class="pl-c1">runtimeChunk</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">my <strong>entries</strong> files will follow the naming <code class="notranslate">filename: '[name].js'</code> and <strong>lazyloaded</strong> chunks will follow <code class="notranslate">chunkFilename: '[name].[chunkhash].js'</code></p> <p dir="auto">but when I use this config (seperate the runtimeChunk):</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">output</span>: <span class="pl-kos">{</span> <span class="pl-c1">publicPath</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">production</span><span class="pl-kos">.</span><span class="pl-c1">publicPath</span><span class="pl-kos">,</span> <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span> <span class="pl-c1">chunkFilename</span>: <span class="pl-s">'[name].[chunkhash].js'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span> <span class="pl-c1">runtimeChunk</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'manifest'</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <p dir="auto"><strong>all my files</strong> names becomes <code class="notranslate">'[name].[chunkhash].js'</code></p> <p dir="auto">Is this an expected behaviour?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2388420" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="yKTe094cLJ7MZqawcXk1ANYLP7gm9hg3WctClTCzyxkyQ4aidVqPu-MImdIO3TEyZjhvqrjeAEvWS8KxeV5Vmw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2388420/edit_form?textarea_id=gistcomment-2388420-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/sherlock1982/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/sherlock1982"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/20403307?s=80&v=4" width="40" height="40" alt="@sherlock1982" /></a> </div> <div id="gistcomment-2388631" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2388631-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/sherlock1982/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/sherlock1982">sherlock1982</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2388631#gistcomment-2388631" id="gistcomment-2388631-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-22T07:28:41Z" class="no-wrap">Mar 22, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Hi! All this is very interesting but fine tuning is a bit unclear.<br> What to do if:</p> <ol dir="auto"> <li> <p dir="auto">I have async chunk and don't want it to be splitted for vendors. Because webpack splits it into two: async~vendor (big) and async (small, approx. 130bytes). And that's overhead.</p> </li> <li> <p dir="auto">I have entrypoint chunk and don't want it to be splitted. Because see 1.</p> </li> <li> <p dir="auto">I have entrypoint chunk and do want it to be splitted because it's too big.</p> </li> </ol> <p dir="auto">Well I understand that I can set <code class="notranslate">chunks</code> to <code class="notranslate">all</code>, <code class="notranslate">initial</code>, <code class="notranslate">async</code> but that changes whole application behavior.<br> Are there any reasons these shoudn't worry me and generating too small or too big chunks is ok?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2388631" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="C1j8j27LYluM7CCx69fX9vTHVL8OAaJbUL9rOxUhuj7dZlkFGzspkHz52vid8_uTWJRccvhGKBpYaLWeIr6Jng" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2388631/edit_form?textarea_id=gistcomment-2388631-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/malectro/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/malectro"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/249565?s=80&v=4" width="40" height="40" alt="@malectro" /></a> </div> <div id="gistcomment-2390230" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2390230-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/malectro/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/malectro">malectro</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2390230#gistcomment-2390230" id="gistcomment-2390230-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-23T16:04:45Z" class="no-wrap">Mar 23, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jtomaszewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jtomaszewski">@jtomaszewski</a> i think he means you want to call <code class="notranslate">stats.toJson({entrypoints: true})</code>?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2390230" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="YLUh26LMLlnyLvJH7HnzKT2CJUxjgC7n9cdBvcpMEDuVDG_RfcwtM-iUTl1Xz-eit7wIV0AMEgT9LCytDtQhXw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2390230/edit_form?textarea_id=gistcomment-2390230-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/didschai/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/didschai"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/21258534?s=80&v=4" width="40" height="40" alt="@didschai" /></a> </div> <div id="gistcomment-2395574" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2395574-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/didschai/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/didschai">didschai</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2395574#gistcomment-2395574" id="gistcomment-2395574-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-29T09:32:17Z" class="no-wrap">Mar 29, 2018</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjM5NTU3NA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jtomaszewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jtomaszewski">@jtomaszewski</a> Thanks for your example. I adapted parts of it and the files seem to look OK.<br> However, if I include the entrypoint bundle (which contains the webpackBootstrap runtime code) in my html page, it is not executed and no chunks are loaded.<br> This is the config which splits the webapp into 2 areas:</p> <pre lang="optimization:" data-meta="{" class="notranslate"><code class="notranslate"> minimize: false, splitChunks: { chunks: 'all', minSize: 0, maxAsyncRequests: Infinity, maxInitialRequests: Infinity, name: true, cacheGroups: { default: { chunks: 'async', minSize: 30000, minChunks: 2, maxAsyncRequests: 5, maxInitialRequests: 3, priority: -20, reuseExistingChunk: true, }, main: { name: "main", test: function (module) { return ( module.resource && (module.resource.includes('node_modules') || module.resource.includes('Root')) ); }, reuseExistingChunk: true, priority: -10, enforce: true }, admin: { name: "admin", test: function (module) { return ( module.resource && (module.resource.includes('node_modules') || module.resource.includes('Admin')) ); }, reuseExistingChunk: true, priority: -9, enforce: true } } } } </code></pre> <p dir="auto">the output file structure is:</p> <pre class="notranslate"><code class="notranslate">./Root/... // some other bundles ./Admin/shared/main.bundle.js ./Admin/dashboard/index.js // this should be the main entry of admin area ./2.chunk.js ... ./admin.chunk.js ./main.chunk.js </code></pre> <p dir="auto">is there anything I'm still missing?<br> Thanks!</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2395574" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="exnnhT2sEICgEDn1x-4w-MZbxrVrIue1dVHFChJ4o5xQG9bdasRPKSoyrVz6hL5ZtIgDNR_HrHYiJ4K_czkcnw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2395574/edit_form?textarea_id=gistcomment-2395574-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/BalticSoft/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/BalticSoft"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/23080318?s=80&v=4" width="40" height="40" alt="@BalticSoft" /></a> </div> <div id="gistcomment-2396939" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2396939-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/BalticSoft/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/BalticSoft">BalticSoft</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2396939#gistcomment-2396939" id="gistcomment-2396939-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-30T14:25:58Z" class="no-wrap">Mar 30, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Hi!. What means enforce: true ?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2396939" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="BOoiebbXtlvjkn1wHf16iWv_n1Cai2wzWk2MZ8PbHXgtI4rvLLe9KDP_2UoRgQzaoUB3_uNJjJzxXCRZLOjmFA" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2396939/edit_form?textarea_id=gistcomment-2396939-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/BalticSoft/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/BalticSoft"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/23080318?s=80&v=4" width="40" height="40" alt="@BalticSoft" /></a> </div> <div id="gistcomment-2396951" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2396951-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/BalticSoft/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/BalticSoft">BalticSoft</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2396951#gistcomment-2396951" id="gistcomment-2396951-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-30T14:46:41Z" class="no-wrap">Mar 30, 2018</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjM5Njk1MQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I have<br> <code class="notranslate"> new webpack.optimize.CommonsChunkPlugin({ name: "commons", filename: "commons_w.js", minChunks: 3, }),</code><br> But when i replaced for<br> <code class="notranslate">optimization: { splitChunks: { cacheGroups: { common: { name: 'common_w', chunks: 'all', minChunks: 2, enforce: true, },}, } },</code>. I have error "require is not defined".</p> <p dir="auto">index.html<br> `<script src="/assets/js/r/common_w"></script><br> ....</p> <script src="[other]"></script> <p dir="auto">`<br> Thanks!</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2396951" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="XBxZX7hEE8RToaZoiJHvtX2En8_BBcuvEUzkRzJr2wpDLNazBmETDqwPIxA4UHgVO6iogzxpZnP0cyuUVT3yDA" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2396951/edit_form?textarea_id=gistcomment-2396951-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/budarin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/budarin"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/8055157?s=80&v=4" width="40" height="40" alt="@budarin" /></a> </div> <div id="gistcomment-2401381" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2401381-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/budarin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/budarin">budarin</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2401381#gistcomment-2401381" id="gistcomment-2401381-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-04-04T18:03:16Z" class="no-wrap">Apr 4, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I can not optimize my bundles with a new version</p> <p dir="auto">here is my config:</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">{</span> <span class="pl-c1">mode</span>: <span class="pl-s">'production'</span><span class="pl-kos">,</span> <span class="pl-c1">target</span>: <span class="pl-s">'web'</span><span class="pl-kos">,</span> <span class="pl-c1">cache</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">entry</span>: <span class="pl-kos">{</span> <span class="pl-c1">client</span>: <span class="pl-s">'./src/client/index.js'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">output</span>: <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'./dist'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">filename</span>: <span class="pl-s">'[name].[hash].js'</span><span class="pl-kos">,</span> <span class="pl-c1">chunkFilename</span>: <span class="pl-s">'[name].[chunkhash].chunk.js'</span><span class="pl-kos">,</span> <span class="pl-c1">publicPath</span>: <span class="pl-s">'/'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c">// devtool: 'inline-cheap-module-source-map',</span> <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span> <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span> <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-s">n</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">e</span><span class="pl-s">_</span><span class="pl-s">m</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">u</span><span class="pl-s">l</span><span class="pl-s">e</span><span class="pl-s">s</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c">// you may add "vendor.js" here if you want to</span> <span class="pl-c1">name</span>: <span class="pl-s">'vendor'</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'all'</span><span class="pl-kos">,</span> <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">runtimeChunk</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'runtime'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">minimizer</span>: <span class="pl-kos">[</span><span class="pl-k">new</span> <span class="pl-v">BabiliPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-k">new</span> <span class="pl-v">OptimizeJsPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">sourceMap</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">occurrenceOrder</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> ...</pre></div> <p dir="auto">after building many bundles have common modules.<br> How to lift common modules to to a parent bundle?</p> <p dir="auto">Thanks</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2401381" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="TgHTGOpyXCb7PEhptHVZHo8dppoJWJBzbp9lIfFZTovsG4Xax5YolQXD0UmZqs6imYhLUzfYjliEvQI3FYqorw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2401381/edit_form?textarea_id=gistcomment-2401381-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/jamieYou/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jamieYou"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/19544032?s=80&v=4" width="40" height="40" alt="@jamieYou" /></a> </div> <div id="gistcomment-2402596" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2402596-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/jamieYou/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jamieYou">jamieYou</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2402596#gistcomment-2402596" id="gistcomment-2402596-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-04-05T16:21:05Z" class="no-wrap">Apr 5, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <h4 dir="auto">How does webpack4 not generate a common file when processing multiple entries?</h4> <p dir="auto">My webpack.config file.</p> <pre class="notranslate"><code class="notranslate">entry: { client: '', admin: '', }, optimization: { splitChunks: { chunks: 'all' }, }, </code></pre> <p dir="auto">However, in the case of multiple portals, the code shared by the third-party code and the two portals is split into several files.</p> <pre class="notranslate"><code class="notranslate"> admin.bundle.js admin~client.chunk.js client.bundle.js vendors~admin~client.chunk.js vendors~client.chunk.js // Occasionally there will be one more document // vendors~admin.chunk.js </code></pre> <p dir="auto">My expectation is that the files after the two portals are packaged are not dependent on each other.<br> which is</p> <pre class="notranslate"><code class="notranslate"> admin.bundle.js vendors~admin.chunk.js // --------------------------- client.bundle.js vendors~client.chunk.js </code></pre> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2402596" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="3Rg4X9WmPWZUkg1BMAtpjhZSlSR74Sp03u0Xfo_agwercCoICd2yncctXtYN5NPqyJBQB03cZATy5p9xkYb6cQ" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2402596/edit_form?textarea_id=gistcomment-2402596-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/MLuminary/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/MLuminary"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/17595913?s=80&v=4" width="40" height="40" alt="@MLuminary" /></a> </div> <div id="gistcomment-2520837" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2520837-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/MLuminary/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/MLuminary">MLuminary</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2520837#gistcomment-2520837" id="gistcomment-2520837-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-04-10T15:46:13Z" class="no-wrap">Apr 10, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">hi,I'm just a beginner and i have an unsolvable problem</p> <p dir="auto">this is my <code class="notranslate">webpack.config.js</code></p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-s1">entry</span>:<span class="pl-kos">{</span> <span class="pl-c1">index</span>: <span class="pl-s">'./src/js/index.js'</span><span class="pl-kos">,</span> <span class="pl-c1">cart</span>: <span class="pl-s">'./src/js/cart.js'</span><span class="pl-kos">,</span> <span class="pl-c1">vendor</span>: <span class="pl-kos">[</span><span class="pl-s">'jquery'</span><span class="pl-kos">,</span><span class="pl-s">'./src/js/common.js'</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">optimization</span>:<span class="pl-kos">{</span> <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">commons</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">"vendor"</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'initial'</span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-c1">10</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">runtimeChunk</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <p dir="auto">my css file cannot be introduced</p> <p dir="auto">when <code class="notranslate">runtimeChunk</code> is false,the css file can be introduced but <code class="notranslate">0.js</code> and <code class="notranslate">1.js</code> will appear</p> <p dir="auto">Do i have to configure css ? please tell me why , thankshi,I'm just a beginner and i have an unsolvable problem</p> <p dir="auto">this is my <code class="notranslate">webpack.config.js</code></p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-s1">entry</span>:<span class="pl-kos">{</span> <span class="pl-c1">index</span>: <span class="pl-s">'./src/js/index.js'</span><span class="pl-kos">,</span> <span class="pl-c1">cart</span>: <span class="pl-s">'./src/js/cart.js'</span><span class="pl-kos">,</span> <span class="pl-c1">vendor</span>: <span class="pl-kos">[</span><span class="pl-s">'jquery'</span><span class="pl-kos">,</span><span class="pl-s">'./src/js/common.js'</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">optimization</span>:<span class="pl-kos">{</span> <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">commons</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">"vendor"</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'initial'</span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-c1">10</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">runtimeChunk</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <p dir="auto">my css file cannot be introduced</p> <p dir="auto">when <code class="notranslate">runtimeChunk</code> is false,the css file can be introduced but <code class="notranslate">0.js</code> and <code class="notranslate">1.js</code> will appear</p> <p dir="auto">Do i have to configure css ? please tell me why , thanks</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2520837" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="w78cyJMdGf6Oiub9znes6N9wNkKnhwt5QgZFZEP6njUYcV4q6hcCCikmiKRFvJx3_TRcB4xTmN302BLbDWMzDQ" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2520837/edit_form?textarea_id=gistcomment-2520837-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/aspirisen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/aspirisen"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/3620639?s=80&v=4" width="40" height="40" alt="@aspirisen" /></a> </div> <div id="gistcomment-2556708" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2556708-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/aspirisen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/aspirisen">aspirisen</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2556708#gistcomment-2556708" id="gistcomment-2556708-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-04-16T13:50:01Z" class="no-wrap">Apr 16, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">What is the correct config for webpack 4 if in previous I had this. When i tried I always had all the common and vendor chunks together.<br> Thanks.</p> <pre class="notranslate"><code class="notranslate">const path = require('path'); const webpack = require('webpack'); module.exports = { context: path.join(__dirname, 'src'), entry: { home: "./Home", order: "./Order", profile: "./Profile", shop: "./Shop", vendor: ["lodash", "jquery"] }, output: { path: path.join(__dirname, "built"), filename: "[name].js" }, resolve: { extensions: ['.js'] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: ["common", 'vendor'], minChunks: 2, }) ] } </code></pre> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2556708" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="4ZPQEjBnaVtwVarTyjt3jjmi3C9RVmE7rHal8iHSf08gUzfFLtV07NJ61Jq8xhcXb_2nnP5qmANynPy1ebIzAQ" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2556708/edit_form?textarea_id=gistcomment-2556708-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/lfkwtz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/lfkwtz"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/1746853?s=80&v=4" width="40" height="40" alt="@lfkwtz" /></a> </div> <div id="gistcomment-2557395" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2557395-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/lfkwtz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/lfkwtz">lfkwtz</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2557395#gistcomment-2557395" id="gistcomment-2557395-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-04-16T21:48:01Z" class="no-wrap">Apr 16, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gricard/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gricard">@gricard</a> what did you end up changing to no longer be stuck with <code class="notranslate">0.bundle.min.js</code>?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2557395" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="cCy0fGoKIvyBZ4BTfDHNyYGOs8pKyR7AuB5F9SBj2mfrmcFQ6ZTg_ZZoEUo8Vzew8eYhvFQmbXTyM74wwl8W_A" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2557395/edit_form?textarea_id=gistcomment-2557395-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/crazyfx1/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/crazyfx1"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/9930385?s=80&v=4" width="40" height="40" alt="@crazyfx1" /></a> </div> <div id="gistcomment-2562254" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2562254-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/crazyfx1/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/crazyfx1">crazyfx1</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2562254#gistcomment-2562254" id="gistcomment-2562254-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-04-20T07:39:25Z" class="no-wrap">Apr 20, 2018</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjU2MjI1NA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/aspirisen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/aspirisen">@aspirisen</a> Did you find a solution for this? I have exactly the same webpack 3 configuration with the array as name property and can't figure out the correct configuration for splitChunks.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2562254" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="p_6f_rdvQgpE7MouZRhly5GM9_UGtZZXyU1wa9XV9qdRsZMgUlcBRG1wZ_lhcPCXjbLl28J888yAR55ch8o0HA" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2562254/edit_form?textarea_id=gistcomment-2562254-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/rbinsztock/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/rbinsztock"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/829378?s=80&v=4" width="40" height="40" alt="@rbinsztock" /></a> </div> <div id="gistcomment-2569796" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2569796-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/rbinsztock/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/rbinsztock">rbinsztock</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2569796#gistcomment-2569796" id="gistcomment-2569796-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-04-25T13:44:30Z" class="no-wrap">Apr 25, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <pre class="notranslate"><code class="notranslate">splitChunks: { chunks: "async", minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, name: true, cacheGroups: { default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 } } } </code></pre> <p dir="auto">missing one ',' after priority: -20</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2569796" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="x8Fabn3bMPAlD6mkXl_epMA0MkmdqXGy2G-upq8jfcp7_Eh8_dUnBHfUMxkdEZ7GpBTUX93BjxruHmfVunUAuw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2569796/edit_form?textarea_id=gistcomment-2569796-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/budarin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/budarin"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/8055157?s=80&v=4" width="40" height="40" alt="@budarin" /></a> </div> <div id="gistcomment-2579171" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2579171-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/budarin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/budarin">budarin</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2579171#gistcomment-2579171" id="gistcomment-2579171-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-05-04T14:21:35Z" class="no-wrap">May 4, 2018</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjU3OTE3MQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Hi!</p> <p dir="auto">How move common modules into parent bundle like it was in webpack3?</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"> <span class="pl-s1">entry</span>: <span class="pl-kos">{</span> <span class="pl-c1">client</span>: <span class="pl-s">'./src/client/index.js'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">optimization</span>: <span class="pl-kos">{</span> <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">default</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span> <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span><span class="pl-s">n</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">e</span><span class="pl-s">_</span><span class="pl-s">m</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">u</span><span class="pl-s">l</span><span class="pl-s">e</span><span class="pl-s">s</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c">// you may add "vendor.js" here if you want to</span> <span class="pl-c1">name</span>: <span class="pl-s">'vendor'</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-s">'all'</span><span class="pl-kos">,</span> <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">runtimeChunk</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'runtime'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">occurrenceOrder</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <p dir="auto">I have common code in many bundles, instead of lifting common code upper in bundles tree (not into the only one common chunk - its not right to have all common code to move into common chunk)</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2579171" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="V_A0LhHybDKiMN5cWQOWMZ_GkA_T8n7rDEuTsnhYttAXSnX29SPVKnQkSQYdayJjEbSSSIkpgFO3sfgnwaISdg" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2579171/edit_form?textarea_id=gistcomment-2579171-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/IanVS/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/IanVS"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/4616705?s=80&v=4" width="40" height="40" alt="@IanVS" /></a> </div> <div id="gistcomment-2583318" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2583318-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/IanVS/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/IanVS">IanVS</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2583318#gistcomment-2583318" id="gistcomment-2583318-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-05-09T02:31:22Z" class="no-wrap">May 9, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I'm really struggling right now to duplicate the behavior that CommonsChunkPlugin gave for injecting code into all entries, by giving it a <code class="notranslate">name</code> which was the same as an entry point. It seems the behavior now for <code class="notranslate">SplitChunksPlugin</code> is to throw away the entry?! <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/simonjoom/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/simonjoom">@simonjoom</a>, I'm basically trying to do the same as you, were you able to figure it out?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2583318" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="3GYEkTfOD0a-haecoPXe6HJszELKqj42Z-xTF5MEZz0CuMoPF7xVVwYF63MTFpbPV-O1RVKmxSy5DI6doWardw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2583318/edit_form?textarea_id=gistcomment-2583318-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/arthow4n/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/arthow4n"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/13860646?s=80&v=4" width="40" height="40" alt="@arthow4n" /></a> </div> <div id="gistcomment-2589551" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2589551-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/arthow4n/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/arthow4n">arthow4n</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2589551#gistcomment-2589551" id="gistcomment-2589551-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-05-15T04:39:19Z" class="no-wrap">May 15, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Here's a side-by-side guide for folks trying to reproduce the "vendor bundle" chunking behavior in Webpack 4, this worked for me.<br> The key point is that you can pass function into <code class="notranslate">chunks</code> and <code class="notranslate">test</code> (undocumented in the doc of <code class="notranslate">SplitChunksPlugin</code>). After knowing this, all you need is insert a function with debugger statement into it, trial-and-error, look at the output of <code class="notranslate">webpack-bundle-analyzer</code>, and find out what works for you.<br> I couldn't figure this out without reading the webpack config schema. <a href="https://github.com/webpack/webpack/blob/master/schemas/WebpackOptions.json">https://github.com/webpack/webpack/blob/master/schemas/WebpackOptions.json</a></p> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/budarin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/budarin">@budarin</a> might be interested in this?</p> <h2 dir="auto">Good Old Webpack 3</h2> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-c">// vendor.js</span> <span class="pl-k">import</span> <span class="pl-s1">moment</span> <span class="pl-k">from</span> <span class="pl-s">'moment'</span><span class="pl-kos">;</span> <span class="pl-s1">moment</span><span class="pl-kos">.</span><span class="pl-en">locale</span><span class="pl-kos">(</span><span class="pl-s">'zh-tw'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-c">// application.js</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'application'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-text-html-basic" dir="auto"><pre class="notranslate"><span class="pl-c"><!-- index.html --></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">vendor.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">application.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-c">// webpack.config.js</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">entry</span>: <span class="pl-kos">{</span> <span class="pl-c1">vendor</span>: <span class="pl-s">'src/vendor.js'</span><span class="pl-kos">,</span> <span class="pl-c1">application</span>: <span class="pl-s">'src/application.js'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span> <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'vendor'</span><span class="pl-kos">,</span> <span class="pl-c1">chunks</span>: <span class="pl-kos">[</span><span class="pl-s">'application'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-en">minChunks</span>: <span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">context</span> <span class="pl-c1">=</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">context</span><span class="pl-kos">;</span> <span class="pl-k">return</span> <span class="pl-s1">context</span> <span class="pl-c1">&&</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">indexOf</span><span class="pl-kos">(</span><span class="pl-s">'node_modules'</span><span class="pl-kos">)</span> <span class="pl-c1">>=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <h2 dir="auto">Upgrading to Webpack 4</h2> <p dir="auto">The vendor bundle doesn't have to be modified.</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-c">// vendor.js</span> <span class="pl-k">import</span> <span class="pl-s1">moment</span> <span class="pl-k">from</span> <span class="pl-s">'moment'</span><span class="pl-kos">;</span> <span class="pl-s1">moment</span><span class="pl-kos">.</span><span class="pl-en">locale</span><span class="pl-kos">(</span><span class="pl-s">'zh-tw'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You must import the vendor bundle explicitly in Webpack 4 even if you have placed both of the bundle script tags in order on the HTML.</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-c">// application.js</span> <span class="pl-k">import</span> <span class="pl-s">'./vendor'</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'application'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">The HTML doesn't have to be modified.</p> <div class="highlight highlight-text-html-basic" dir="auto"><pre class="notranslate"><span class="pl-c"><!-- index.html --></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">vendor.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">application.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <p dir="auto">Update your Webpack config:</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-c">// webpack.config.js</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">entry</span>: <span class="pl-kos">{</span> <span class="pl-c1">vendor</span>: <span class="pl-s">'src/vendor.js'</span><span class="pl-kos">,</span> <span class="pl-c1">application</span>: <span class="pl-s">'src/application.js'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span> <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span> <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span> <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'vendor'</span><span class="pl-kos">,</span> <span class="pl-c1">reuseExistingChunk</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-en">chunks</span>: <span class="pl-s1">chunk</span> <span class="pl-c1">=></span> <span class="pl-kos">[</span><span class="pl-s">'vendor'</span><span class="pl-kos">,</span> <span class="pl-s">'application'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s1">chunk</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-en">test</span>: <span class="pl-smi">module</span> <span class="pl-c1">=></span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span><span class="pl-s">n</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">e</span><span class="pl-s">_</span><span class="pl-s">m</span><span class="pl-s">o</span><span class="pl-s">d</span><span class="pl-s">u</span><span class="pl-s">l</span><span class="pl-s">e</span><span class="pl-s">s</span><span class="pl-kos">[</span><span class="pl-cce">\\</span><span class="pl-c1">/</span><span class="pl-kos">]</span><span class="pl-c1">/</span></span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">context</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">minChunks</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">minSize</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2589551" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="RhT-4dt3qXm6ujS8XLg70xiDiyW21juvZA9_cBe3C7MzOCOCbUj41QKyud_ZNtvxJu_xQ12q7lHDboNi7gkkwg" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2589551/edit_form?textarea_id=gistcomment-2589551-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/petrdanecek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/petrdanecek"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/29194829?s=80&v=4" width="40" height="40" alt="@petrdanecek" /></a> </div> <div id="gistcomment-2640711" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2640711-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/petrdanecek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/petrdanecek">petrdanecek</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2640711#gistcomment-2640711" id="gistcomment-2640711-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-07-07T18:38:16Z" class="no-wrap">Jul 7, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Regards the vendor.js without the vendor.css (the node_module related CSS is not extracted to independent vendor.css, but the CSS is kept in the app.css instead of), this would be the solution:</p> <pre class="notranslate"><code class="notranslate"> optimization: { runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/].*(?<!\.(sa|sc|c)ss)$/, name: 'vendor', chunks: 'all' } } } }, </code></pre> <p dir="auto">Test matches all files in node_modules expect the SCSS|SASS|CSS. Both app and vendor styles are extracted into app.css.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2640711" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="ZA0pq-iKtXKQlSbWjXCamYd2BPI1ZJe_gamcOgZHUcvGGwFKkFBKG6HBeNaocjdq1_rlFb9JMIySDS8O2DJDpA" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2640711/edit_form?textarea_id=gistcomment-2640711-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/magicdawn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/magicdawn"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/4067115?s=80&v=4" width="40" height="40" alt="@magicdawn" /></a> </div> <div id="gistcomment-2657523" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2657523-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/magicdawn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/magicdawn">magicdawn</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2657523#gistcomment-2657523" id="gistcomment-2657523-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-07-24T17:18:15Z" class="no-wrap">Jul 24, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">typo<br> <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4067115/43154927-7cc8b402-8fa8-11e8-9f94-0d62bb107728.png"><img src="https://user-images.githubusercontent.com/4067115/43154927-7cc8b402-8fa8-11e8-9f94-0d62bb107728.png" alt="image" style="max-width: 100%;"></a></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2657523" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="emLgXYnFNkcQJPOKMkESzNN2nqzNjBKGBcsVpIogSskD3AjHjHY9G_aJbNPVzHEhuKVhMgfvsnF3TgizJrRpXw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2657523/edit_form?textarea_id=gistcomment-2657523-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/ufo1792/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ufo1792"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/45842201?s=80&v=4" width="40" height="40" alt="@ufo1792" /></a> </div> <div id="gistcomment-2803627" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2803627-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/ufo1792/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ufo1792">ufo1792</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2803627#gistcomment-2803627" id="gistcomment-2803627-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2019-01-08T01:41:50Z" class="no-wrap">Jan 8, 2019</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjgwMzYyNw==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">i tried many times.. but frustrated..<br> i'm poor at english.. how can i solve this code? very very thank you<br> very simple code..<br> i want to make file name is 'vendor.bundle.js' please help<br> i know that using optimization, splitchunks because difference of webpack versions but i tried many but i'm poor in this.<br> anyone please help me.....</p> <p dir="auto">plugins:[<br> new webpack.optimize.CommonsChunkPlugin('vendor','vendor.bundle.js')<br> i think this code need to be modyfied</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/45842201/50804666-709ada80-1332-11e9-96c5-84bdc584856b.JPG"><img src="https://user-images.githubusercontent.com/45842201/50804666-709ada80-1332-11e9-96c5-84bdc584856b.JPG" alt="default" style="max-width: 100%;"></a></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2803627" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="dmPfkHxcMj0ZumI5mTHPNgSWDlPI3036UjZtrrp7LVWiLd3lJG5DAU81VhwwVzNflU9nxNOv_OQ5KDy_JfWtqA" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2803627/edit_form?textarea_id=gistcomment-2803627-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vsTianhao/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vsTianhao"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/32083528?s=80&v=4" width="40" height="40" alt="@vsTianhao" /></a> </div> <div id="gistcomment-2913695" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2913695-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/vsTianhao/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vsTianhao">vsTianhao</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=2913695#gistcomment-2913695" id="gistcomment-2913695-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2019-05-10T08:01:52Z" class="no-wrap">May 10, 2019</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MjkxMzY5NQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">There's a mistake.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32083528/57511879-ca6bdb00-72f9-11e9-90d4-44b403eee76e.png"><img src="https://user-images.githubusercontent.com/32083528/57511879-ca6bdb00-72f9-11e9-90d4-44b403eee76e.png" alt="无标题" style="max-width: 100%;"></a></p> <p dir="auto">comma error</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2913695" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="NQBO2sNLNuyk7HUO8RRs__6QMka4nVz8PdMu6PWjk-afBzetVqowKbDVMH7UiX2RrQKbhalNFs_RJRJPbT3cuw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/2913695/edit_form?textarea_id=gistcomment-2913695-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/hanweiit007/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/hanweiit007"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/14070903?s=80&v=4" width="40" height="40" alt="@hanweiit007" /></a> </div> <div id="gistcomment-3030783" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3030783-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/hanweiit007/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/hanweiit007">hanweiit007</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=3030783#gistcomment-3030783" id="gistcomment-3030783-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2019-09-18T03:16:56Z" class="no-wrap">Sep 18, 2019</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MzAzMDc4Mw==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I would like to ask how to modify my configuration.<br> CommonsChunkPlugin change to splitChunks.</p> <pre class="notranslate"><code class="notranslate">entry: { main: ['./app/js/common/vendor.js', './app/js/common/common.js', './app/index.js'], ie8: './app/js/polyfills/ie8-polyfill.js', ie9: './app/js/polyfills/ie9-polyfill.js' }, new webpack.optimize.CommonsChunkPlugin({ name: 'app-common', chunks: chunksForAppCommon, children: false, minChunks: function(module, count) { if (module.context && module.context.indexOf('node_modules') !== -1 && module.context.indexOf('i18n-messages') === -1 && count > 0) { console.log("app-common 1: " + count + "\t" + module.resource); return true; } if (!module.resource) { console.log("app-common 2: " + count + "\t" + module.resource + "\t" + module.context); return true; } if (module.context && module.context.indexOf('i18n-messages') === -1 && count > 0 && count === chunksForAppCommon.length) { console.log("app-common 3: " + count + "\t" + module.resource); return true; } console.log("app-common 9: " + count + "\t" + module.resource); return false; } }), new webpack.optimize.CommonsChunkPlugin({ name: 'runtime', minChunks: Infinity }), </code></pre> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/3030783" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Xmqm0ySzD8OIwCSTlxppVY6IThVPhcgEo2pmThI4TVduRwZVfQhvlwn4WJTEExOEAgx5rQT3s8YHOWyyO8VX8g" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/3030783/edit_form?textarea_id=gistcomment-3030783-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/carldiegelmann/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/carldiegelmann"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/13413299?s=80&v=4" width="40" height="40" alt="@carldiegelmann" /></a> </div> <div id="gistcomment-3116112" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3116112-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/carldiegelmann/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/carldiegelmann">carldiegelmann</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=3116112#gistcomment-3116112" id="gistcomment-3116112-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2019-12-19T12:54:08Z" class="no-wrap">Dec 19, 2019</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MTUyMmQ1ODZiOGU1YzBmNTA3MmQ3NTY1YzJiZWU2OTM6MzExNjExMg==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">How can I write this Chunk configuration with Webpack 4:</p> <p dir="auto"><code class="notranslate">config.plugins.push( new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', // make sure that only the explicitly defined entries are included in the bundle minChunks: Infinity, }) ); config.plugins.push( new webpack.optimize.CommonsChunkPlugin({ name: 'ct-core', chunks: Object.keys(moduleEntries), minChunks: 2, }) );</code></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/3116112" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="XddUQXc1gwTNUA5yOQB75Y79WDJkDRpv292jOLAMWYJRj29RYLtUPdWEorV98vVxxgtuZXEGUczS2e0fj87Tkg" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/3116112/edit_form?textarea_id=gistcomment-3116112-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/tonix-tuft/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tonix-tuft"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/10134421?s=80&v=4" width="40" height="40" alt="@tonix-tuft" /></a> </div> <div id="gistcomment-3252035" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3252035-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/tonix-tuft/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tonix-tuft">tonix-tuft</a> </strong> commented <a href="/sokra/1522d586b8e5c0f5072d7565c2bee693?permalink_comment_id=3252035#gistcomment-3252035" id="gistcomment-3252035-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-04-13T06:04:09Z" class="no-wrap">Apr 13, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Where can I find a guide and or tutorial explaining all this stuff but more in detail and in a friendlier way? Thanks!</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/3252035" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Cq1MTJcBddXaMdpQkgvv4BZqyVxt0hccEXZYjJheFCJNc0gtkvPDNIGxWrwfJz5-zUgqviyRkb9YyboOzBOecw" autocomplete="off" /> <include-fragment loading="lazy" src="/sokra/1522d586b8e5c0f5072d7565c2bee693/comments/3252035/edit_form?textarea_id=gistcomment-3252035-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <!-- Rendered timeline since 2024-05-23 09:10:34 --> <div id="partial-timeline-marker" class="js-timeline-marker js-updatable-content" data-last-modified="Thu, 23 May 2024 16:10:34 GMT" > </div> </div> <div class="discussion-timeline-actions"> <div data-view-component="true" class="flash flash-warn mt-3"> <a rel="nofollow" class="btn btn-primary" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="c1cdd86ebc0e69aeb37429b940d5ee7f53122f9f78e50775a968425dec960340" href="/join?source=comment-gist">Sign up for free</a> <strong>to join this conversation on GitHub</strong>. Already have an account? <a rel="nofollow" class="Link--inTextBlock" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693","user_id":null}}" data-hydro-click-hmac="895ab2cc0c071594c89fc12f860f9b27d82b992c439dc792a31ed03e32b92991" data-test-selector="comments-sign-in-link" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Fsokra%2F1522d586b8e5c0f5072d7565c2bee693">Sign in to comment</a> </div> </div> </div> </div> </div> </div> </div><!-- /.container --> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2025 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>