CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Webpack 3 to 4: Facing the known unknowns and unknown unknowns | by Chris Liu | Coursera Engineering | Medium</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2018-10-11T12:01:02.474Z"/><meta data-rh="true" name="title" content="Webpack 3 to 4: Facing the known unknowns and unknown unknowns | by Chris Liu | Coursera Engineering | Medium"/><meta data-rh="true" property="og:title" content="Webpack 3 to 4: Facing the known unknowns and unknown unknowns"/><meta data-rh="true" property="al:android:url" content="medium://p/cdfeb817faf8"/><meta data-rh="true" property="al:ios:url" content="medium://p/cdfeb817faf8"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application. We hope this is either an entertaining recollection or helpful for your own future upgrades…"/><meta data-rh="true" property="og:description" content="This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application."/><meta data-rh="true" property="og:url" content="https://medium.com/coursera-engineering/webpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8"/><meta data-rh="true" property="al:web:url" content="https://medium.com/coursera-engineering/webpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/da:true/resize:fit:719/0*Inb_k0uJHCmGBr2_"/><meta data-rh="true" property="article:author" content="https://medium.com/@cliu_88389"/><meta data-rh="true" name="author" content="Chris Liu"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Webpack 3 to 4: Facing the known unknowns and unknown unknowns"/><meta data-rh="true" name="twitter:site" content="@CourseraEng"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/cdfeb817faf8"/><meta data-rh="true" property="twitter:description" content="This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application."/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/da:true/resize:fit:719/0*Inb_k0uJHCmGBr2_"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="7 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@cliu_88389"/><link data-rh="true" rel="canonical" href="https://medium.com/coursera-engineering/webpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/cdfeb817faf8"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fda:true\u002Fresize:fit:1200\u002F0*Inb_k0uJHCmGBr2_"],"url":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8","dateCreated":"2018-10-11T12:01:02.474Z","datePublished":"2018-10-11T12:01:02.474Z","dateModified":"2018-10-11T15:33:24.535Z","headline":"Webpack 3 to 4: Facing the known unknowns and unknown unknowns","name":"Webpack 3 to 4: Facing the known unknowns and unknown unknowns","description":"This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application. We hope this is either an entertaining recollection or helpful for your own future upgrades…","identifier":"cdfeb817faf8","author":{"@type":"Person","name":"Chris Liu","url":"https:\u002F\u002Fmedium.com\u002F@cliu_88389"},"creator":["Chris Liu"],"publisher":{"@type":"Organization","name":"Coursera Engineering","url":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering","logo":{"@type":"ImageObject","width":422,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:844\u002F1*zXjOKA4JKHH04Ipi2NI0jA.png"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8"}</script><style type="text/css" data-fela-rehydration="574" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="574" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(99, 136, 191, 1)}.es{border-color:rgba(99, 136, 191, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(99, 136, 191, 1)}.ez:disabled:hover{border-color:rgba(99, 136, 191, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.ia{align-items:baseline}.ib{width:48px}.ic{height:48px}.id{border:2px solid rgba(255, 255, 255, 1)}.ie{z-index:0}.if{box-shadow:none}.ig{border:1px solid rgba(0, 0, 0, 0.05)}.ih{margin-left:-12px}.ii{width:28px}.ij{height:28px}.ik{z-index:1}.il{width:24px}.im{margin-bottom:2px}.in{flex-wrap:nowrap}.io{font-size:16px}.ip{line-height:24px}.ir{margin:0 8px}.is{display:inline}.it{color:rgba(99, 136, 191, 1)}.iu{fill:rgba(99, 136, 191, 1)}.ix{flex:0 0 auto}.ja{flex-wrap:wrap}.jb{white-space:pre-wrap}.jc{margin-right:4px}.jd{overflow:hidden}.je{max-height:20px}.jf{text-overflow:ellipsis}.jg{display:-webkit-box}.jh{-webkit-line-clamp:1}.ji{-webkit-box-orient:vertical}.jj{word-break:break-all}.jl{padding-left:8px}.jm{padding-right:8px}.kn> *{flex-shrink:0}.ko{overflow-x:scroll}.kp::-webkit-scrollbar{display:none}.kq{scrollbar-width:none}.kr{-ms-overflow-style:none}.ks{width:74px}.kt{flex-direction:row}.ku{z-index:2}.kx{-webkit-user-select:none}.ky{border:0}.kz{fill:rgba(117, 117, 117, 1)}.lc{outline:0}.ld{user-select:none}.le> svg{pointer-events:none}.ln{cursor:progress}.lo{margin-left:4px}.lp{margin-top:0px}.lq{opacity:1}.lr{padding:4px 0}.lu{width:16px}.lw{display:inline-flex}.mc{max-width:100%}.md{padding:8px 2px}.me svg{color:#6B6B6B}.mv{line-height:1.58}.mw{letter-spacing:-0.004em}.mx{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.ns{margin-bottom:-0.46em}.nt{line-height:1.12}.nu{letter-spacing:-0.022em}.nv{font-weight:600}.oq{margin-bottom:-0.28em}.ow{text-decoration:underline}.ox{margin-left:auto}.oy{margin-right:auto}.oz{max-width:719px}.pf{clear:both}.ph{cursor:zoom-in}.pi{z-index:auto}.pk{height:auto}.pl{margin-top:10px}.pm{max-width:728px}.pp{list-style-type:disc}.pq{margin-left:30px}.pr{padding-left:0px}.ps{overflow-x:auto}.pt{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.pu{padding:20px}.pv{border-radius:0}.pw{background:#F2F2F2}.px{line-height:1.18}.py{margin-top:-0.09em}.pz{margin-bottom:-0.09em}.qa{min-width:fit-content}.qb{margin-top:0.91em}.qh{padding:2px 4px}.qi{font-size:75%}.qj> strong{font-family:inherit}.qx{margin-bottom:-0.31em}.qy{max-width:1288px}.qz{margin:auto}.ra{padding-bottom:100%}.rb{height:0}.rc{margin-bottom:26px}.rd{margin-top:6px}.re{margin-top:8px}.rf{margin-right:8px}.rg{padding:8px 16px}.rh{border-radius:100px}.ri{transition:background 300ms ease}.rk{white-space:nowrap}.rl{border-top:none}.rm{margin-bottom:50px}.rn{height:52px}.ro{max-height:52px}.rp{box-sizing:content-box}.rq{position:static}.rs{max-width:155px}.ry{margin-right:20px}.rz{margin-bottom:64px}.sa{margin-bottom:48px}.so{border-radius:2px}.sq{height:64px}.sr{width:64px}.ss{align-self:flex-end}.st{flex:1 1 auto}.sz{padding-right:4px}.ta{font-weight:500}.th{margin-top:16px}.ti{color:rgba(255, 255, 255, 1)}.tj{fill:rgba(255, 255, 255, 1)}.tk{background:rgba(25, 25, 25, 1)}.tl{border-color:rgba(25, 25, 25, 1)}.to:disabled{opacity:0.1}.tp:disabled:hover{background:rgba(25, 25, 25, 1)}.tq:disabled:hover{border-color:rgba(25, 25, 25, 1)}.tw{height:0px}.tx{gap:18px}.ty{fill:rgba(61, 61, 61, 1)}.ua{padding-bottom:6px}.ub{border-bottom:1px solid #F2F2F2}.uh{margin-top:32px}.ui{fill:#242424}.uj{background:0}.uk{border-color:#242424}.ul:disabled:hover{color:#242424}.um:disabled:hover{fill:#242424}.un:disabled:hover{border-color:#242424}.uy{border-bottom:solid 1px #E5E5E5}.uz{margin-top:72px}.va{padding:24px 0}.vb{margin-bottom:0px}.vc{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(87, 117, 161, 1)}.eu:hover{border-color:rgba(87, 117, 161, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.iq:hover{text-decoration:underline}.iv:hover:not(:disabled){color:rgba(87, 117, 161, 1)}.iw:hover:not(:disabled){fill:rgba(87, 117, 161, 1)}.lb:hover{fill:rgba(8, 8, 8, 1)}.ls:hover{fill:#000000}.lt:hover p{color:#000000}.lv:hover{color:#000000}.mf:hover svg{color:#000000}.rj:hover{background-color:#F2F2F2}.sp:hover{background-color:none}.tm:hover{background:#000000}.tn:hover{border-color:#242424}.tz:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.la:focus{fill:rgba(8, 8, 8, 1)}.mg:focus svg{color:#000000}.pj:focus{transform:scale(1.01)}.lf:active{border-style:none}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:50px}.gc{max-width:680px}.hq{font-size:42px}.hr{margin-top:1.19em}.hs{margin-bottom:32px}.ht{line-height:52px}.hu{letter-spacing:-0.011em}.hz{align-items:center}.jz{border-top:solid 1px #F2F2F2}.ka{border-bottom:solid 1px #F2F2F2}.kb{margin:32px 0 0}.kc{padding:3px 8px}.kl> *{margin-right:24px}.km> :last-child{margin-right:0}.lm{margin-top:0px}.mb{margin:0}.no{font-size:20px}.np{margin-top:2.14em}.nq{line-height:32px}.nr{letter-spacing:-0.003em}.om{font-size:24px}.on{margin-top:1.95em}.oo{line-height:30px}.op{letter-spacing:-0.016em}.ov{margin-top:0.94em}.pe{margin-top:56px}.qg{margin-top:1.14em}.qu{margin-top:1.72em}.qv{line-height:24px}.qw{letter-spacing:0}.rx{display:inline-block}.sb{flex-direction:row}.se{margin-bottom:0}.sf{margin-right:20px}.su{max-width:500px}.tv{margin-bottom:88px}.ug{margin:40px 0 16px}.us{width:min-width}.ux{padding-top:72px}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.ll{margin-top:0px}.pn{margin-left:auto}.po{text-align:center}.rw{display:inline-block}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lk{margin-top:0px}.rv{display:inline-block}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.li{margin-top:0px}.lj{margin-right:0px}.ru{display:inline-block}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:2px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{margin-bottom:24px}.gz{line-height:38px}.ha{letter-spacing:-0.014em}.hv{align-items:flex-start}.iy{flex-direction:column}.jn{margin:24px -24px 0}.jo{padding:0}.kd> *{margin-right:8px}.ke> :last-child{margin-right:24px}.kv{margin-left:0px}.lg{margin-top:0px}.lh{margin-right:0px}.lx{margin:0}.mh{border:1px solid #F2F2F2}.mi{border-radius:99em}.mj{padding:0px 16px 0px 12px}.mk{height:38px}.ml{align-items:center}.mn svg{margin-right:8px}.my{font-size:18px}.mz{margin-top:1.56em}.na{line-height:28px}.nb{letter-spacing:-0.003em}.nw{font-size:20px}.nx{margin-top:1.2em}.ny{line-height:24px}.nz{letter-spacing:0}.or{margin-top:0.67em}.pa{margin-top:40px}.qc{margin-top:1.34em}.qk{font-size:16px}.ql{margin-top:1.23em}.rt{display:inline-block}.sm{margin-bottom:20px}.sn{margin-right:0}.sy{max-width:100%}.tb{font-size:24px}.tc{line-height:30px}.td{letter-spacing:-0.016em}.tr{margin-bottom:64px}.uc{margin:32px 0 16px}.uo{width:100%}.ut{padding-top:48px}.mm:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:50px}.gb{max-width:680px}.hl{font-size:42px}.hm{margin-top:1.19em}.hn{margin-bottom:32px}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.hy{align-items:center}.jv{border-top:solid 1px #F2F2F2}.jw{border-bottom:solid 1px #F2F2F2}.jx{margin:32px 0 0}.jy{padding:3px 8px}.kj> *{margin-right:24px}.kk> :last-child{margin-right:0}.ma{margin:0}.nk{font-size:20px}.nl{margin-top:2.14em}.nm{line-height:32px}.nn{letter-spacing:-0.003em}.oi{font-size:24px}.oj{margin-top:1.95em}.ok{line-height:30px}.ol{letter-spacing:-0.016em}.ou{margin-top:0.94em}.pd{margin-top:56px}.qf{margin-top:1.14em}.qr{margin-top:1.72em}.qs{line-height:24px}.qt{letter-spacing:0}.sc{flex-direction:row}.sg{margin-bottom:0}.sh{margin-right:20px}.sv{max-width:500px}.tu{margin-bottom:88px}.uf{margin:40px 0 16px}.ur{width:min-width}.uw{padding-top:72px}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:50px}.ga{max-width:680px}.hg{font-size:42px}.hh{margin-top:1.19em}.hi{margin-bottom:32px}.hj{line-height:52px}.hk{letter-spacing:-0.011em}.hx{align-items:center}.jr{border-top:solid 1px #F2F2F2}.js{border-bottom:solid 1px #F2F2F2}.jt{margin:32px 0 0}.ju{padding:3px 8px}.kh> *{margin-right:24px}.ki> :last-child{margin-right:0}.lz{margin:0}.ng{font-size:20px}.nh{margin-top:2.14em}.ni{line-height:32px}.nj{letter-spacing:-0.003em}.oe{font-size:24px}.of{margin-top:1.95em}.og{line-height:30px}.oh{letter-spacing:-0.016em}.ot{margin-top:0.94em}.pc{margin-top:56px}.qe{margin-top:1.14em}.qo{margin-top:1.72em}.qp{line-height:24px}.qq{letter-spacing:0}.sd{flex-direction:row}.si{margin-bottom:0}.sj{margin-right:20px}.sw{max-width:500px}.tt{margin-bottom:88px}.ue{margin:40px 0 16px}.uq{width:min-width}.uv{padding-top:72px}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:2px}.hb{font-size:32px}.hc{margin-top:1.01em}.hd{margin-bottom:24px}.he{line-height:38px}.hf{letter-spacing:-0.014em}.hw{align-items:flex-start}.iz{flex-direction:column}.jp{margin:24px 0 0}.jq{padding:0}.kf> *{margin-right:8px}.kg> :last-child{margin-right:8px}.kw{margin-left:0px}.ly{margin:0}.mo{border:1px solid #F2F2F2}.mp{border-radius:99em}.mq{padding:0px 16px 0px 12px}.mr{height:38px}.ms{align-items:center}.mu svg{margin-right:8px}.nc{font-size:18px}.nd{margin-top:1.56em}.ne{line-height:28px}.nf{letter-spacing:-0.003em}.oa{font-size:20px}.ob{margin-top:1.2em}.oc{line-height:24px}.od{letter-spacing:0}.os{margin-top:0.67em}.pb{margin-top:40px}.qd{margin-top:1.34em}.qm{font-size:16px}.qn{margin-top:1.23em}.sk{margin-bottom:20px}.sl{margin-right:0}.sx{max-width:100%}.te{font-size:24px}.tf{line-height:30px}.tg{letter-spacing:-0.016em}.ts{margin-bottom:64px}.ud{margin:32px 0 16px}.up{width:100%}.uu{padding-top:48px}.mt:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="print">.rr{display:none}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jk{max-height:none}</style><style type="text/css" data-fela-rehydration="574" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.pg{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Fcdfeb817faf8&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&source=post_page---top_nav_layout_nav-----------------------global_nav------------------">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" rel="noopener follow" href="/?source=---top_nav_layout_nav-----------------------------------------"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" rel="noopener follow" href="/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" rel="noopener follow" href="/search?source=---top_nav_layout_nav-----------------------------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&source=post_page---top_nav_layout_nav-----------------------global_nav------------------">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="25dc" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht hu bk" data-testid="storyTitle"><strong class="al">Webpack 3 to 4: Facing the known unknowns and unknown unknowns</strong></h1><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="hv hw hx hy hz ab"><div><div class="ab ia"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@cliu_88389?source=post_page---byline--cdfeb817faf8---------------------------------------"><div class="l ib ic by id ie"><div class="l fj"><img alt="Chris Liu" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/0*ECSDCjFKbFRqqOIr." width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="if by l dd de fs n ig ft"></div></div></div></a></div></div><div class="ih ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/coursera-engineering?source=post_page---byline--cdfeb817faf8---------------------------------------" rel="noopener follow"><div class="l ii ij by id ik"><div class="l fj"><img alt="Coursera Engineering" class="l fd by br il cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*j2vLJO9qZg435iRYfd2Mfg.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="if by l br il fs n ig ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="im ab q"><div class="ab q in"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b io ip bk"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" data-testid="authorName" rel="noopener follow" href="/@cliu_88389?source=post_page---byline--cdfeb817faf8---------------------------------------">Chris Liu</a></p></div></div></div><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b io ip du"><span><a class="it iu ah ai aj ak al am an ao ap aq ar ex iv iw" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F70814e310ce3&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&user=Chris+Liu&userId=70814e310ce3&source=post_page-70814e310ce3--byline--cdfeb817faf8---------------------post_header------------------">Follow</a></span></p></div></div></span></div></div><div class="l ix"><span class="bf b bg z du"><div class="ab cn iy iz ja"><div class="fu fv ab"><div class="bf b bg z du ab jb"><span class="jc l ix">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar iq ab q" data-testid="publicationName" href="https://medium.com/coursera-engineering?source=post_page---byline--cdfeb817faf8---------------------------------------" rel="noopener follow"><p class="bf b bg z jd je jf jg jh ji jj jk bk">Coursera Engineering</p></a></div></div></div><div class="h k"><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">7 min read</span><div class="jl jm l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Oct 11, 2018</span></div></span></div></span></div></div></div><div class="ab cp jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc"><div class="h k w fg fh q"><div class="ks l"><div class="ab q kt ku"><div class="pw-multi-vote-icon fj jc kv kw kx"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fcoursera-engineering%2Fcdfeb817faf8&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&user=Chris+Liu&userId=70814e310ce3&source=---header_actions--cdfeb817faf8---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="ky ao kz la lb lc am ld le lf kx"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lg lh li lj lk ll lm"><p class="bf b dv z du"><span class="ln">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao ky lq lr ab q fk ls lt" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lp"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count lo lp">1</span></p></button></div></div></div><div class="ab q kd ke kf kg kh ki kj kk kl km kn ko kp kq kr"><div class="lu k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fcdfeb817faf8&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&source=---header_actions--cdfeb817faf8---------------------bookmark_footer------------------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lv" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd lw cn"><div class="l ae"><div class="ab cb"><div class="lx ly lz ma mb mc ci bh"><div class="ab"><div class="bm" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al md an ao ap ex me mf lt mg mh mi mj mk s ml mm mn mo mp mq mr u ms mt mu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al md an ao ap ex me mf lt mg mh mi mj mk s ml mm mn mo mp mq mr u ms mt mu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="7089" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application. We hope this is either an entertaining recollection or helpful for your own future upgrades.</p><h1 id="4948" class="nt nu gu bf nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq bk">Why upgrade?</h1><p id="3f5f" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">Coursera has used Webpack in production for a few years now. Recently, we’ve been thinking about how to do <a class="af ow" href="https://webpack.js.org/guides/code-splitting/" rel="noopener ugc nofollow" target="_blank">code splitting</a> more effectively in an effort to adhere to a <a class="af ow" href="https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/" rel="noopener ugc nofollow" target="_blank">performance budget</a>.</p><p id="4797" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">As we were on Webpack 3, this resulted in an uncomfortable situation: <a class="af ow" href="https://webpack.js.org/plugins/commons-chunk-plugin/" rel="noopener ugc nofollow" target="_blank">CommonsChunkPlugin</a>, the mechanism for ensuring that code common to many split points is extracted to a common file, is not part of the deal in Webpack 4. We made the decision to upgrade to Webpack 4 to avoid sinking time into a removed plugin, while also hoping to get some of the <a class="af ow" href="https://github.com/webpack/webpack/releases/tag/v4.0.0" rel="noopener ugc nofollow" target="_blank">benefits</a>.</p><h1 id="dada" class="nt nu gu bf nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq bk">Just follow the instructions, right?</h1><p id="caac" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">Webpack documentation has a page <a class="af ow" href="https://webpack.js.org/migrate/4/" rel="noopener ugc nofollow" target="_blank">dedicated</a> to the upgrade from 3 to 4. Just follow the instructions and we’re done, right? Unfortunately not: In a large web application, there are known unknowns and unknown unknown usages of Webpack. We needed to move them to the realm of known knowns to successfully upgrade.</p><h1 id="7817" class="nt nu gu bf nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq bk">Current State of the World</h1><p id="98fd" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">Before tackling the unknowns, we describe the current state of the world. Coursera utilizes <a class="af ow" rel="noopener" href="/coursera-engineering/why-and-how-coursera-does-isomorphic-javascript-a-fast-and-snappy-quiz-a42acdd59ef8">server-side rendering</a> [SSR] to decrease the time to interaction, while supporting client-side rendering [CSR] for debugging and legacy use cases. Coursera is <a class="af ow" rel="noopener" href="/coursera-engineering/6-steps-to-i18n-success-for-your-web-app-b5702a221860">localized</a> in eight different languages having generated localized Webpack bundles. The Coursera site consists of many single-page applications, each built with Webpack using our internal build system called <a class="af ow" rel="noopener" href="/coursera-engineering/breaking-up-our-javascript-monolith-with-rapidos-86d94e5e9040">Rapidos</a>. Each single-page app is backed by an SSR server deployed as a service on <a class="af ow" href="https://aws.amazon.com/ecs/" rel="noopener ugc nofollow" target="_blank">Elastic Container Service</a>, serving requests coming in from our edge server.</p><p id="e1d1" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">In development mode, we use Webpack dev middleware along with a custom dev server to emulate the production edge server. The custom dev server forwards requests to a local copy of the SSR server to serve requests coming from developers’ laptops.</p><figure class="pa pb pc pd pe pf ox oy paragraph-image"><div role="button" tabindex="0" class="pg ph fj pi bh pj"><div class="ox oy oz"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*Inb_k0uJHCmGBr2_ 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*Inb_k0uJHCmGBr2_ 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*Inb_k0uJHCmGBr2_ 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*Inb_k0uJHCmGBr2_ 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*Inb_k0uJHCmGBr2_ 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*Inb_k0uJHCmGBr2_ 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*Inb_k0uJHCmGBr2_ 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*Inb_k0uJHCmGBr2_ 640w, https://miro.medium.com/v2/resize:fit:720/0*Inb_k0uJHCmGBr2_ 720w, https://miro.medium.com/v2/resize:fit:750/0*Inb_k0uJHCmGBr2_ 750w, https://miro.medium.com/v2/resize:fit:786/0*Inb_k0uJHCmGBr2_ 786w, https://miro.medium.com/v2/resize:fit:828/0*Inb_k0uJHCmGBr2_ 828w, https://miro.medium.com/v2/resize:fit:1100/0*Inb_k0uJHCmGBr2_ 1100w, https://miro.medium.com/v2/resize:fit:1400/0*Inb_k0uJHCmGBr2_ 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mc pk c" width="700" height="519" loading="lazy" role="presentation"/></picture></div></div><figcaption class="pl ff pm ox oy pn po bf b bg z du">Coursera front-end infrastructure</figcaption></figure><h1 id="2263" class="nt nu gu bf nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq bk">Known Unknowns</h1><p id="2e45" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">In pursuing this upgrade, we had a few known unknowns that we needed to tackle one at a time. The reason we call them “known unknowns” is because though we knew each case was a breaking change due to Webpack 4 changes, we did not know how to unbreak each change. In each case, reading through the <a class="af ow" href="https://github.com/webpack/webpack/releases/tag/v4.0.0" rel="noopener ugc nofollow" target="_blank">changelog</a>, our own Webpack build code, and online resources unblocked us.</p><ul class=""><li id="0fc8" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns pp pq pr bk">We had custom code that used the Webpack plugin API for injecting data into HTML templates. This <a class="af ow" href="https://blog.johnnyreilly.com/2018/01/finding-webpack-4-use-map.html" rel="noopener ugc nofollow" target="_blank">post</a> by the maintainer of ts-loader and <a class="af ow" rel="noopener" href="/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202">this guide</a> by the creator of Webpack were enough for us to understand what changes were necessary. Specifically, the plugin API now used the hooks property to tap into Webpack compiler hooks or the developer’s custom hooks.</li></ul><p id="b450" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">For us, this involved changing</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="1939" class="px nu gu pt b io py pz l jb qa">compilation.plugin('html-webpack-plugin-after-html-processing', (htmlPluginData, callback) => {<br/> ...</span><span id="59f9" class="px nu gu pt b io qb pz l jb qa">}</span></pre><p id="1a62" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">to</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="2874" class="px nu gu pt b io py pz l jb qa">compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap( 'withInterpolatedTemplateContext', htmlPluginData => {<br/> ...</span><span id="f92c" class="px nu gu pt b io qb pz l jb qa">}</span></pre><ul class=""><li id="387e" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns pp pq pr bk">We used a variety of libraries that required bumping up versions to support Webpack 4 [e.g., <a class="af ow" href="https://github.com/jantimon/html-webpack-plugin" rel="noopener ugc nofollow" target="_blank">html-webpack-plugin</a>, <a class="af ow" href="https://github.com/amireh/happypack" rel="noopener ugc nofollow" target="_blank">happypack</a>, <a class="af ow" href="https://github.com/webpack/webpack-dev-middleware" rel="noopener ugc nofollow" target="_blank">webpack-dev-middleware</a> …]. This required reading through the changelog or release notes of each library to find which version was Webpack 4 compatible.</li><li id="524e" class="mv mw gu mx b my qc na nb nc qd ne nf ng qe ni nj nk qf nm nn no qg nq nr ns pp pq pr bk">Webpack 4 has a new <code class="cx qh qi qj pt b">mode</code> field that applies certain optimizations by default. This <a class="af ow" rel="noopener" href="/webpack/webpack-4-mode-and-optimization-5423a6bc597a">post</a> by Webpack founder Tobias Koppers gave us all the necessary information. For instance, we removed extraneous plugins like NoEmitOnErrorsPlugin.</li><li id="65c2" class="mv mw gu mx b my qc na nb nc qd ne nf ng qe ni nj nk qf nm nn no qg nq nr ns pp pq pr bk">We needed to migrate our old usage of CommonsChunkPlugin over to SplitChunksPlugin before investing more into code splitting. This required reading this <a class="af ow" href="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693" rel="noopener ugc nofollow" target="_blank">gist</a> describing the difference between the two plugins and then reading the <a class="af ow" href="https://webpack.js.org/plugins/split-chunks-plugin/" rel="noopener ugc nofollow" target="_blank">docs</a>. It took us several rounds of reading and playing around with the code for us to understand the new concepts. Our old setting looked like this:</li></ul><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="f54f" class="px nu gu pt b io py pz l jb qa">new webpack.optimize.CommonsChunkPlugin({<br/> name: 'app',<br/> async: true,<br/> children: true,<br/> minChunks: 3,<br/>})</span></pre><p id="a55b" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">Which translates to “create a single async common chunk that contains code common to 3+ async splits.” This translates to the following SplitChunksPlugin setting in <code class="cx qh qi qj pt b">config.optimizations.splitChunks.cacheGroups</code>:</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="1ac0" class="px nu gu pt b io py pz l jb qa">{<br/> …<br/> commons: {<br/> chunks: 'async',<br/> name: 'asyncCommonJS',<br/> minChunks: 3,<br/> // Ignores `minSize`, `maxSize`, and other defaults.<br/> enforce: true,<br/> priority: 0,<br/> },<br/> // The next 2 lines disable the 2 default `cacheGroups`, which are specified in<br/> // <a class="af ow" href="https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks" rel="noopener ugc nofollow" target="_blank">https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks</a><br/> default: false,<br/> vendor: false,<br/> …<br/>}</span></pre><ul class=""><li id="9d4f" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns pp pq pr bk">We needed to change require paths for various Webpack internal files that had been refactored to import the correct files. For instance,<code class="cx qh qi qj pt b">require('webpack/schemas/webpackOptionsSchema.json') -> require('webpack/schemas/WebpackOptions.json')</code></li></ul><h1 id="4dbf" class="nt nu gu bf nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq bk">Unknown Unknowns</h1><p id="fb2e" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">A variety of things we classify as unknown unknowns surprised us In the process of upgrading. In every upgrade, unknown unknowns will pop up: it is our job to understand the root cause so we can apply fixes from a position of knowledge.</p><h2 id="53b3" class="px nu gu bf nv qk ql dy nz qm qn ea od ng qo qp qq nk qr qs qt no qu qv qw qx bk">JSON modules</h2><p id="f633" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">Webpack 4 now by default regards files with .json extension as JSON modules:</p><figure class="pa pb pc pd pe pf ox oy paragraph-image"><div role="button" tabindex="0" class="pg ph fj pi bh pj"><div class="ox oy qy"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*ftpTtI0GLr-AUb2R 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*ftpTtI0GLr-AUb2R 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*ftpTtI0GLr-AUb2R 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*ftpTtI0GLr-AUb2R 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*ftpTtI0GLr-AUb2R 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*ftpTtI0GLr-AUb2R 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*ftpTtI0GLr-AUb2R 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*ftpTtI0GLr-AUb2R 640w, https://miro.medium.com/v2/resize:fit:720/0*ftpTtI0GLr-AUb2R 720w, https://miro.medium.com/v2/resize:fit:750/0*ftpTtI0GLr-AUb2R 750w, https://miro.medium.com/v2/resize:fit:786/0*ftpTtI0GLr-AUb2R 786w, https://miro.medium.com/v2/resize:fit:828/0*ftpTtI0GLr-AUb2R 828w, https://miro.medium.com/v2/resize:fit:1100/0*ftpTtI0GLr-AUb2R 1100w, https://miro.medium.com/v2/resize:fit:1400/0*ftpTtI0GLr-AUb2R 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mc pk c" width="700" height="71" loading="lazy" role="presentation"/></picture></div></div><figcaption class="pl ff pm ox oy pn po bf b bg z du"><a class="af ow" rel="noopener" href="/webpack/webpack-4-released-today-6cdb994702d4">Source</a> from Webpack 4 changelogs</figcaption></figure><p id="cc0b" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">This turned out not to play nicely with our usage of <a class="af ow" href="https://github.com/webpack-contrib/bundle-loader" rel="noopener ugc nofollow" target="_blank">bundle-loader</a>, which we used for lazy loading JSON. See <a class="af ow" href="https://github.com/webpack-contrib/bundle-loader/issues/74" rel="noopener ugc nofollow" target="_blank">this</a> issue for more details. The fix is to force files with .json extensions to use <a class="af ow" href="https://github.com/webpack-contrib/json-loader" rel="noopener ugc nofollow" target="_blank">json-loader</a>, which does work with bundle-loader:</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="fca6" class="px nu gu pt b io py pz l jb qa">{<br/> test: /\.json$/,<br/> loader: 'json-loader',<br/> type: 'javascript/auto',<br/>}</span></pre><h2 id="179b" class="px nu gu bf nv qk ql dy nz qm qn ea od ng qo qp qq nk qr qs qt no qu qv qw qx bk">CSS Bundling</h2><p id="9f0c" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">We previously used <a class="af ow" href="https://github.com/webpack-contrib/extract-text-webpack-plugin" rel="noopener ugc nofollow" target="_blank">extract-text-webpack-plugin</a> to bundle all our CSS into a single file. This library is no longer recommended for Webpack 4 CSS support [see <a class="af ow" href="https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701" rel="noopener ugc nofollow" target="_blank">here</a> and <a class="af ow" href="https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/749" rel="noopener ugc nofollow" target="_blank">here</a>]. As other folks have reported success with Webpack 4, we tried it anyway. This mostly worked, except the CSS import order was no longer respected. Unfortunately we relied upon the cascading nature of CSS for style overrides in certain cases, making it necessary to respect CSS ordering.</p><p id="6615" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">This issue was a common theme with extract-text-webpack-plugin [e.g., see <a class="af ow" href="https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/745" rel="noopener ugc nofollow" target="_blank">here</a>], so we bit the bullet and migrated to <a class="af ow" href="https://github.com/webpack-contrib/mini-css-extract-plugin" rel="noopener ugc nofollow" target="_blank">mini-css-extract-plugin</a>.</p><p id="528b" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">The config changes are as follows:</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="d767" class="px nu gu pt b io py pz l jb qa">new ExtractTextPlugin({<br/> filename: [name].[chunkhash].css,<br/> allChunks: true,<br/> disable: isDev(),<br/>})</span></pre><p id="a125" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">is now</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="db22" class="px nu gu pt b io py pz l jb qa">new MiniCssExtractPlugin({<br/> filename: ‘[name].[chunkhash].css’,<br/>})</span></pre><p id="ebba" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">along with the following option in <code class="cx qh qi qj pt b">optimizations.splitChunks.cacheGroups</code>:</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="73b8" class="px nu gu pt b io py pz l jb qa">{<br/> name: 'allStyles',<br/> test: (m: Module) => m.constructor.name === 'CssModule',<br/> chunks: 'all',<br/> enforce: true,<br/> priority: 1,<br/>}</span></pre><p id="8f63" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">We needed to use the test property to test on CssModule rather than looking for the .css extension because we use Stylus in our codebase.</p><p id="15b3" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">After this change, we also faced <a class="af ow" href="https://github.com/webpack-contrib/mini-css-extract-plugin/issues/147" rel="noopener ugc nofollow" target="_blank">this</a> <a class="af ow" href="https://github.com/webpack/webpack/issues/7300#issuecomment-399225385" rel="noopener ugc nofollow" target="_blank">issue</a> with the plugin generating an additional Javascript file stealing the original entrypoint. We modified our usage of <a class="af ow" href="https://www.npmjs.com/package/html-webpack-include-assets-plugin" rel="noopener ugc nofollow" target="_blank">html-webpack-include-assets-plugin</a> to also include the additional Javascript file to unbreak module loading.</p><h2 id="0de7" class="px nu gu bf nv qk ql dy nz qm qn ea od ng qo qp qq nk qr qs qt no qu qv qw qx bk">Larger stats.json output</h2><p id="6b8a" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">We generate a Webpack <a class="af ow" href="https://webpack.js.org/configuration/stats/" rel="noopener ugc nofollow" target="_blank">stats.json</a> file with every Webpack build as Rapidos uses the information on what files were bundled for visualization with <a class="af ow" href="https://github.com/webpack-contrib/webpack-bundle-analyzer" rel="noopener ugc nofollow" target="_blank">webpack-bundle-visualizer</a> and to understand the transitive dependencies of each app. We got errors that looked like <code class="cx qh qi qj pt b">RangeError: Invalid string length</code>, which after a <a class="af ow" href="https://github.com/nodejs/node/issues/13465" rel="noopener ugc nofollow" target="_blank">search</a> were revealed to be an issue with attempting to create too large a string from a JSON object. The exact nature of the issue was fairly obscure: it looks like Webpack 4 refactored the stats object format, which made the object a lot larger by default [<a class="af ow" href="https://github.com/webpack/webpack/pull/5926/files#diff-baf371f5446dc9bc4b41022587e05b48R342" rel="noopener ugc nofollow" target="_blank">source</a>]. The source of this increase, issuerPath, is not configurable. After some experimenting, we changed our StatsPlugin configuration to the following:</p><pre class="pa pb pc pd pe ps pt pu pv ay pw bk"><span id="d6ba" class="px nu gu pt b io py pz l jb qa">modules: true,<br/>chunks: true,<br/>timings: false,<br/>source: false,<br/>reasons: true,</span></pre><p id="01ef" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">which still gave us the relevant information while keeping the file small enough to be produced.</p><h2 id="2f02" class="px nu gu bf nv qk ql dy nz qm qn ea od ng qo qp qq nk qr qs qt no qu qv qw qx bk">Webpack-multi-output and undocumented hooks usage</h2><p id="9f2a" class="pw-post-body-paragraph mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns gn bk">We use <a class="af ow" href="https://github.com/coursera/webpack-multi-output" rel="noopener ugc nofollow" target="_blank">webpack-multi-output</a> to generate multiple outputs for a single configuration. Each chunk that passes through this plugin may generate multiple chunks, one per locale. The Webpack chunk loading script then needs to be modified to make things work. In previous versions, we made use of an <a class="af ow" href="https://github.com/coursera/webpack-multi-output/blob/master/what.md#jsonp-script" rel="noopener ugc nofollow" target="_blank">undocumented hook</a> to do this:</p><figure class="pa pb pc pd pe pf"><div class="qz jd l fj"><div class="ra rb l"></div></div><figcaption class="pl ff pm ox oy pn po bf b bg z du">Webpack 3 jsonp script hack for webpack-multi-output</figcaption></figure><p id="dd12" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">Access to this hook is no longer allowed in Webpack 4, so we had to use the <code class="cx qh qi qj pt b">mainTemplate.hooks.render</code> hook along with an undocumented <a class="af ow" href="https://github.com/webpack/tapable#hookhookmap-interface" rel="noopener ugc nofollow" target="_blank">stage</a> flag to make <a class="af ow" href="https://github.com/coursera/webpack-multi-output/commit/72135b54a863fc680ebfe5df40ee60afa7dcb40d#diff-a4f485aa834ca5b3c24819fceb39c56fR164" rel="noopener ugc nofollow" target="_blank">this</a> work. It now looks like this:</p><figure class="pa pb pc pd pe pf"><div class="qz jd l fj"><div class="ra rb l"></div></div><figcaption class="pl ff pm ox oy pn po bf b bg z du">webpack-multi-output jsonp script hack for Webpack 4</figcaption></figure><p id="9902" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">We want to stop using webpack-multi-output in the near future — this hack reduces bus factor, makes future upgrades hard, and disempowers non-experts who want to make changes.</p><h1 id="4ff3" class="nt nu gu bf nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq bk">What did we get out of this upgrade?</h1><ul class=""><li id="cfa3" class="mv mw gu mx b my or na nb nc os ne nf ng ot ni nj nk ou nm nn no ov nq nr ns pp pq pr bk">Build times are faster. In lazy loading cases, we’ve seen incremental compilation of one of our apps go from ~10s in Webpack 3 to ~2.5s in Webpack 4. Another app went from ~30s to ~20s. In production bundling, we saw a 10–30% decrease in the cold cache case, and a ~50–60% decrease with Uglify cache.</li><li id="0147" class="mv mw gu mx b my qc na nb nc qd ne nf ng qe ni nj nk qf nm nn no qg nq nr ns pp pq pr bk">Bundle sizes are roughly identical.</li><li id="373c" class="mv mw gu mx b my qc na nb nc qd ne nf ng qe ni nj nk qf nm nn no qg nq nr ns pp pq pr bk">We’ve reduced our dependency on deprecated, unmaintained, or outdated plugins.</li><li id="c826" class="mv mw gu mx b my qc na nb nc qd ne nf ng qe ni nj nk qf nm nn no qg nq nr ns pp pq pr bk">We are now confident building on top of Webpack — through reading the source code of Webpack, keeping up with recent developments, and having a better mental image of Webpack internals [e.g., <a class="af ow" rel="noopener" href="/webpack/the-chunk-graph-algorithm-week-26-29-7c88aa5e4b4e">chunk graph algorithm</a>, <a class="af ow" href="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693" rel="noopener ugc nofollow" target="_blank">split chunks plugin</a>], we now feel empowered to take full advantage of Webpack.</li></ul><p id="6946" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">That’s all — we hope you enjoyed following along with Coursera’s journey upgrading from Webpack 3 to Webpack 4. We went through trials and tribulations, but think the final outcome was worth the effort.</p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="rc rd ab ja"><div class="re ab"><a class="rf ay am ao" rel="noopener follow" href="/tag/webpack?source=post_page-----cdfeb817faf8---------------------------------------"><div class="rg fj cx rh ge ri rj bf b bg z bk rk">Webpack</div></a></div><div class="re ab"><a class="rf ay am ao" rel="noopener follow" href="/tag/coursera?source=post_page-----cdfeb817faf8---------------------------------------"><div class="rg fj cx rh ge ri rj bf b bg z bk rk">Coursera</div></a></div><div class="re ab"><a class="rf ay am ao" rel="noopener follow" href="/tag/frontend?source=post_page-----cdfeb817faf8---------------------------------------"><div class="rg fj cx rh ge ri rj bf b bg z bk rk">Frontend</div></a></div><div class="re ab"><a class="rf ay am ao" rel="noopener follow" href="/tag/upgrade?source=post_page-----cdfeb817faf8---------------------------------------"><div class="rg fj cx rh ge ri rj bf b bg z bk rk">Upgrade</div></a></div><div class="re ab"><a class="rf ay am ao" rel="noopener follow" href="/tag/infrastructure?source=post_page-----cdfeb817faf8---------------------------------------"><div class="rg fj cx rh ge ri rj bf b bg z bk rk">Infrastructure</div></a></div></div></div></div><div class="l"></div><footer class="rl rm rn ro rp ab q rq ik c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rr"><div class="ab q kt"><div class="rs l"><span class="l rt ru rv e d"><div class="ab q kt ku"><div class="pw-multi-vote-icon fj jc kv kw kx"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fcoursera-engineering%2Fcdfeb817faf8&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&user=Chris+Liu&userId=70814e310ce3&source=---footer_actions--cdfeb817faf8---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="ky ao kz la lb lc am ld le lf kx"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lg lh li lj lk ll lm"><p class="bf b dv z du"><span class="ln">--</span></p></div></div></span><span class="l h g f rw rx"><div class="ab q kt ku"><div class="pw-multi-vote-icon fj jc kv kw kx"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fcoursera-engineering%2Fcdfeb817faf8&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&user=Chris+Liu&userId=70814e310ce3&source=---footer_actions--cdfeb817faf8---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="ky ao kz la lb lc am ld le lf kx"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lg lh li lj lk ll lm"><p class="bf b dv z du"><span class="ln">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao ky lq lr ab q fk ls lt" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lp"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count lo lp">1</span></p></button></div></div></div></div><div class="ab q"><div class="ry l ix"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fcdfeb817faf8&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fcoursera-engineering%2Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8&source=---footer_actions--cdfeb817faf8---------------------bookmark_footer------------------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lv" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="ry l ix"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al md an ao ap ex me mf lt mg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="rz l"><div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="sa l"><div class="ab sb sc sd iz iy"><div class="se sf sg sh si sj sk sl sm sn ab cp"><div class="h k"><a href="https://medium.com/coursera-engineering?source=post_page---post_publication_info--cdfeb817faf8---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Coursera Engineering" class="so ib ic cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*j2vLJO9qZg435iRYfd2Mfg.png" width="48" height="48" loading="lazy"/><div class="so l ic ib fs n fr sp"></div></div></a></div><div class="j i d"><a href="https://medium.com/coursera-engineering?source=post_page---post_publication_info--cdfeb817faf8---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Coursera Engineering" class="so sr sq cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*j2vLJO9qZg435iRYfd2Mfg.png" width="64" height="64" loading="lazy"/><div class="so l sq sr fs n fr sp"></div></div></a></div><div class="j i d ss ix"><div class="ab"></div></div></div><div class="ab co st"><div class="su sv sw sx sy l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/coursera-engineering?source=post_page---post_publication_info--cdfeb817faf8---------------------------------------" rel="noopener follow"><h2 class="pw-author-name bf ta tb tc td te tf tg ng qp qq nk qs qt no qv qw bk"><span class="gn sz">Published in <!-- -->Coursera Engineering</span></h2></a><div class="re ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/coursera-engineering/followers?source=post_page---post_publication_info--cdfeb817faf8---------------------------------------">3.8K Followers</a></span></div><div class="bf b bg z du ab jb"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/coursera-engineering/two-easy-ways-to-determine-right-size-for-aws-rds-instance-through-request-mirroring-load-test-9cd6e8ac8b5c?source=post_page---post_publication_info--cdfeb817faf8---------------------------------------">Last published <span>Jan 3, 2023</span></a></div></div><div class="th l"><p class="bf b bg z bk"><span class="gn">We're changing the way the world learns! Posts from Coursera engineers and data scientists.</span></p></div></div></div><div class="h k"><div class="ab"></div></div></div></div><div class="ab sb sc sd iz iy"><div class="se sf sg sh si sj sk sl sm sn ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@cliu_88389?source=post_page---post_author_info--cdfeb817faf8---------------------------------------"><div class="l fj"><img alt="Chris Liu" class="l fd by ic ib cx" src="https://miro.medium.com/v2/resize:fill:96:96/0*ECSDCjFKbFRqqOIr." width="48" height="48" loading="lazy"/><div class="fr by l ic ib fs n ay sp"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@cliu_88389?source=post_page---post_author_info--cdfeb817faf8---------------------------------------"><div class="l fj"><img alt="Chris Liu" class="l fd by sq sr cx" src="https://miro.medium.com/v2/resize:fill:128:128/0*ECSDCjFKbFRqqOIr." width="64" height="64" loading="lazy"/><div class="fr by l sq sr fs n ay sp"></div></div></a></div><div class="j i d ss ix"><div class="ab"><span><button class="bf b bg z ti rg tj tk tl tm tn ev ew to tp tq fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co st"><div class="su sv sw sx sy l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@cliu_88389?source=post_page---post_author_info--cdfeb817faf8---------------------------------------"><h2 class="pw-author-name bf ta tb tc td te tf tg ng qp qq nk qs qt no qv qw bk"><span class="gn sz">Written by <!-- -->Chris Liu</span></h2></a><div class="re ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@cliu_88389/followers?source=post_page---post_author_info--cdfeb817faf8---------------------------------------">103 Followers</a></span></div><div class="bf b bg z du ab jb"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@cliu_88389/following?source=post_page---post_author_info--cdfeb817faf8---------------------------------------">4 Following</a></div></div><div class="th l"><p class="bf b bg z bk"><span class="gn">Passionate about education and solving hard problems in a collaborative fashion.</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z ti rg tj tk tl tm tn ev ew to tp tq fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div></div><div class="tr ts tt tu tv l"><div class="tw bh r rz"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf ta nw ny nz oa oc od oe og oh oi ok ol om oo op bk">Responses (<!-- -->1<!-- -->)</h2><div class="ab tx"><div><div class="bm" aria-hidden="false"><a class="ty tz" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--cdfeb817faf8---------------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="ua ub uc ud ue uf ug l"></div><div class="uh l"><button class="bf b bg z bk rg ui uj uk lv ls tn ev ew ex ul um un fa uo up uq ur us fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="ut uu uv uw ux l bx"><div class="h k j"><div class="tw bh uy uz"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="va ab kt ja"><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----cdfeb817faf8---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----cdfeb817faf8---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/about?autoplay=1&source=post_page-----cdfeb817faf8---------------------------------------"><p class="bf b dv z du">About</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----cdfeb817faf8---------------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="mailto:pressinquiries@medium.com" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----cdfeb817faf8---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----cdfeb817faf8---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----cdfeb817faf8---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="vb vc l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----cdfeb817faf8---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="vb l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/business?source=post_page-----cdfeb817faf8---------------------------------------"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20250219-002809-db39adfadc"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCachePosts","post-cdfeb817faf8","user-70814e310ce3","collection-532b19e4043c"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"pubFeaturingPostPageLabelEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"4edb1f64-293e-4ad6-a274-1c8fca3eec32","requestTag":"","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-675a79bb7dda56c8ade009ef53c00616-ff46e5fd8b66fcb2-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20250219-002809-db39adfadc","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20250219-002809-db39adfadc","commit":"db39adfadc192312f28c2885c9597817d91b6042"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"coursera-engineering\"})":{"__ref":"Collection:532b19e4043c"},"postResult({\"id\":\"cdfeb817faf8\"})":{"__ref":"Post:cdfeb817faf8"}},"ImageMetadata:":{"__typename":"ImageMetadata","id":""},"Collection:532b19e4043c":{"__typename":"Collection","id":"532b19e4043c","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFECF3FF","point":0},{"__typename":"ColorPoint","color":"#FFE8F2FF","point":0.1},{"__typename":"ColorPoint","color":"#FFE5F0FF","point":0.2},{"__typename":"ColorPoint","color":"#FFE1EFFF","point":0.3},{"__typename":"ColorPoint","color":"#FFDDEDFF","point":0.4},{"__typename":"ColorPoint","color":"#FFD9EBFF","point":0.5},{"__typename":"ColorPoint","color":"#FFD6EAFF","point":0.6},{"__typename":"ColorPoint","color":"#FFD2E8FF","point":0.7},{"__typename":"ColorPoint","color":"#FFCEE6FF","point":0.8},{"__typename":"ColorPoint","color":"#FFCAE5FF","point":0.9},{"__typename":"ColorPoint","color":"#FFC6E3FF","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF6388BF","point":0},{"__typename":"ColorPoint","color":"#FF5D7EB0","point":0.1},{"__typename":"ColorPoint","color":"#FF5775A1","point":0.2},{"__typename":"ColorPoint","color":"#FF516B91","point":0.3},{"__typename":"ColorPoint","color":"#FF4A6182","point":0.4},{"__typename":"ColorPoint","color":"#FF435673","point":0.5},{"__typename":"ColorPoint","color":"#FF3C4B63","point":0.6},{"__typename":"ColorPoint","color":"#FF334054","point":0.7},{"__typename":"ColorPoint","color":"#FF2A3444","point":0.8},{"__typename":"ColorPoint","color":"#FF202833","point":0.9},{"__typename":"ColorPoint","color":"#FF151B23","point":1}]},"tintBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FF82A8E1","colorPoints":[{"__typename":"ColorPoint","color":"#FF82A8E1","point":0},{"__typename":"ColorPoint","color":"#FF8FB1E6","point":0.1},{"__typename":"ColorPoint","color":"#FF9CBBEA","point":0.2},{"__typename":"ColorPoint","color":"#FFA8C4EF","point":0.3},{"__typename":"ColorPoint","color":"#FFB4CDF3","point":0.4},{"__typename":"ColorPoint","color":"#FFC0D6F7","point":0.5},{"__typename":"ColorPoint","color":"#FFCCDEFB","point":0.6},{"__typename":"ColorPoint","color":"#FFD8E7FF","point":0.7},{"__typename":"ColorPoint","color":"#FFE3EFFF","point":0.8},{"__typename":"ColorPoint","color":"#FFEFF7FF","point":0.9},{"__typename":"ColorPoint","color":"#FFFAFFFF","point":1}]}},"domain":null,"slug":"coursera-engineering","googleAnalyticsId":null,"name":"Coursera Engineering","avatar":{"__ref":"ImageMetadata:1*j2vLJO9qZg435iRYfd2Mfg.png"},"description":"We're changing the way the world learns! Posts from Coursera engineers and data scientists.","subscriberCount":3814,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:9cd6e8ac8b5c"}]},"isAuroraVisible":false,"tintColor":"#FF82A8E1","newsletterV3":null,"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:532b19e4043c-viewerId:lo_0ffc54a084ed"},"twitterUsername":"CourseraEng","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*zXjOKA4JKHH04Ipi2NI0jA.png"}},"ImageMetadata:1*j2vLJO9qZg435iRYfd2Mfg.png":{"__typename":"ImageMetadata","id":"1*j2vLJO9qZg435iRYfd2Mfg.png"},"User:dbd909ab7ead":{"__typename":"User","id":"dbd909ab7ead","customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"mengying-li.medium.com"}},"hasSubdomain":true,"username":"mengying-li"},"Post:9cd6e8ac8b5c":{"__typename":"Post","id":"9cd6e8ac8b5c","firstPublishedAt":1672713676343,"creator":{"__ref":"User:dbd909ab7ead"},"collection":{"__ref":"Collection:532b19e4043c"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002Ftwo-easy-ways-to-determine-right-size-for-aws-rds-instance-through-request-mirroring-load-test-9cd6e8ac8b5c","sequence":null,"uniqueSlug":"two-easy-ways-to-determine-right-size-for-aws-rds-instance-through-request-mirroring-load-test-9cd6e8ac8b5c"},"LinkedAccounts:70814e310ce3":{"__typename":"LinkedAccounts","mastodon":null,"id":"70814e310ce3"},"User:70814e310ce3":{"__typename":"User","id":"70814e310ce3","linkedAccounts":{"__ref":"LinkedAccounts:70814e310ce3"},"isSuspended":false,"name":"Chris Liu","imageId":"0*ECSDCjFKbFRqqOIr.","customDomainState":null,"hasSubdomain":false,"username":"cliu_88389","verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":103,"followingCount":3,"collectionFollowingCount":1},"bio":"Passionate about education and solving hard problems in a collaborative fashion.","membership":null,"allowNotes":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:70814e310ce3-viewerId:lo_0ffc54a084ed"},"twitterScreenName":""},"Paragraph:ba0da8cb63e4_0":{"__typename":"Paragraph","id":"ba0da8cb63e4_0","name":"25dc","type":"H3","href":null,"layout":null,"metadata":null,"text":"Webpack 3 to 4: Facing the known unknowns and unknown unknowns","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":62,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_1":{"__typename":"Paragraph","id":"ba0da8cb63e4_1","name":"7089","type":"P","href":null,"layout":null,"metadata":null,"text":"This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application. We hope this is either an entertaining recollection or helpful for your own future upgrades.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_2":{"__typename":"Paragraph","id":"ba0da8cb63e4_2","name":"4948","type":"H3","href":null,"layout":null,"metadata":null,"text":"Why upgrade?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_3":{"__typename":"Paragraph","id":"ba0da8cb63e4_3","name":"3f5f","type":"P","href":null,"layout":null,"metadata":null,"text":"Coursera has used Webpack in production for a few years now. Recently, we’ve been thinking about how to do code splitting more effectively in an effort to adhere to a performance budget.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":107,"end":121,"href":"https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fcode-splitting\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":167,"end":185,"href":"https:\u002F\u002Finfrequently.org\u002F2017\u002F10\u002Fcan-you-afford-it-real-world-web-performance-budgets\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_4":{"__typename":"Paragraph","id":"ba0da8cb63e4_4","name":"4797","type":"P","href":null,"layout":null,"metadata":null,"text":"As we were on Webpack 3, this resulted in an uncomfortable situation: CommonsChunkPlugin, the mechanism for ensuring that code common to many split points is extracted to a common file, is not part of the deal in Webpack 4. We made the decision to upgrade to Webpack 4 to avoid sinking time into a removed plugin, while also hoping to get some of the benefits.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":70,"end":88,"href":"https:\u002F\u002Fwebpack.js.org\u002Fplugins\u002Fcommons-chunk-plugin\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":351,"end":359,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack\u002Freleases\u002Ftag\u002Fv4.0.0","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_5":{"__typename":"Paragraph","id":"ba0da8cb63e4_5","name":"dada","type":"H3","href":null,"layout":null,"metadata":null,"text":"Just follow the instructions, right?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_6":{"__typename":"Paragraph","id":"ba0da8cb63e4_6","name":"caac","type":"P","href":null,"layout":null,"metadata":null,"text":"Webpack documentation has a page dedicated to the upgrade from 3 to 4. Just follow the instructions and we’re done, right? Unfortunately not: In a large web application, there are known unknowns and unknown unknown usages of Webpack. We needed to move them to the realm of known knowns to successfully upgrade.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":33,"end":42,"href":"https:\u002F\u002Fwebpack.js.org\u002Fmigrate\u002F4\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_7":{"__typename":"Paragraph","id":"ba0da8cb63e4_7","name":"7817","type":"H3","href":null,"layout":null,"metadata":null,"text":"Current State of the World","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_8":{"__typename":"Paragraph","id":"ba0da8cb63e4_8","name":"98fd","type":"P","href":null,"layout":null,"metadata":null,"text":"Before tackling the unknowns, we describe the current state of the world. Coursera utilizes server-side rendering [SSR] to decrease the time to interaction, while supporting client-side rendering [CSR] for debugging and legacy use cases. Coursera is localized in eight different languages having generated localized Webpack bundles. The Coursera site consists of many single-page applications, each built with Webpack using our internal build system called Rapidos. Each single-page app is backed by an SSR server deployed as a service on Elastic Container Service, serving requests coming in from our edge server.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":92,"end":113,"href":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002Fwhy-and-how-coursera-does-isomorphic-javascript-a-fast-and-snappy-quiz-a42acdd59ef8","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":250,"end":259,"href":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002F6-steps-to-i18n-success-for-your-web-app-b5702a221860","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":457,"end":464,"href":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002Fbreaking-up-our-javascript-monolith-with-rapidos-86d94e5e9040","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":539,"end":564,"href":"https:\u002F\u002Faws.amazon.com\u002Fecs\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_9":{"__typename":"Paragraph","id":"ba0da8cb63e4_9","name":"e1d1","type":"P","href":null,"layout":null,"metadata":null,"text":"In development mode, we use Webpack dev middleware along with a custom dev server to emulate the production edge server. The custom dev server forwards requests to a local copy of the SSR server to serve requests coming from developers’ laptops.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*Inb_k0uJHCmGBr2_":{"__typename":"ImageMetadata","id":"0*Inb_k0uJHCmGBr2_","originalHeight":533,"originalWidth":719,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:ba0da8cb63e4_10":{"__typename":"Paragraph","id":"ba0da8cb63e4_10","name":"cebb","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*Inb_k0uJHCmGBr2_"},"text":"Coursera front-end infrastructure","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_11":{"__typename":"Paragraph","id":"ba0da8cb63e4_11","name":"2263","type":"H3","href":null,"layout":null,"metadata":null,"text":"Known Unknowns","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_12":{"__typename":"Paragraph","id":"ba0da8cb63e4_12","name":"2e45","type":"P","href":null,"layout":null,"metadata":null,"text":"In pursuing this upgrade, we had a few known unknowns that we needed to tackle one at a time. The reason we call them “known unknowns” is because though we knew each case was a breaking change due to Webpack 4 changes, we did not know how to unbreak each change. In each case, reading through the changelog, our own Webpack build code, and online resources unblocked us.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":297,"end":306,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack\u002Freleases\u002Ftag\u002Fv4.0.0","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_13":{"__typename":"Paragraph","id":"ba0da8cb63e4_13","name":"0fc8","type":"ULI","href":null,"layout":null,"metadata":null,"text":"We had custom code that used the Webpack plugin API for injecting data into HTML templates. This post by the maintainer of ts-loader and this guide by the creator of Webpack were enough for us to understand what changes were necessary. Specifically, the plugin API now used the hooks property to tap into Webpack compiler hooks or the developer’s custom hooks.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":97,"end":101,"href":"https:\u002F\u002Fblog.johnnyreilly.com\u002F2018\u002F01\u002Ffinding-webpack-4-use-map.html","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":137,"end":147,"href":"https:\u002F\u002Fmedium.com\u002Fwebpack\u002Fwebpack-4-migration-guide-for-plugins-loaders-20a79b927202","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_14":{"__typename":"Paragraph","id":"ba0da8cb63e4_14","name":"b450","type":"P","href":null,"layout":null,"metadata":null,"text":"For us, this involved changing","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_15":{"__typename":"Paragraph","id":"ba0da8cb63e4_15","name":"1939","type":"PRE","href":null,"layout":null,"metadata":null,"text":"compilation.plugin('html-webpack-plugin-after-html-processing', (htmlPluginData, callback) =\u003E {\n ...","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_16":{"__typename":"Paragraph","id":"ba0da8cb63e4_16","name":"59f9","type":"PRE","href":null,"layout":null,"metadata":null,"text":"}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_17":{"__typename":"Paragraph","id":"ba0da8cb63e4_17","name":"1a62","type":"P","href":null,"layout":null,"metadata":null,"text":"to","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_18":{"__typename":"Paragraph","id":"ba0da8cb63e4_18","name":"2874","type":"PRE","href":null,"layout":null,"metadata":null,"text":"compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap( 'withInterpolatedTemplateContext', htmlPluginData =\u003E {\n ...","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_19":{"__typename":"Paragraph","id":"ba0da8cb63e4_19","name":"f92c","type":"PRE","href":null,"layout":null,"metadata":null,"text":"}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_20":{"__typename":"Paragraph","id":"ba0da8cb63e4_20","name":"387e","type":"ULI","href":null,"layout":null,"metadata":null,"text":"We used a variety of libraries that required bumping up versions to support Webpack 4 [e.g., html-webpack-plugin, happypack, webpack-dev-middleware …]. This required reading through the changelog or release notes of each library to find which version was Webpack 4 compatible.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":93,"end":112,"href":"https:\u002F\u002Fgithub.com\u002Fjantimon\u002Fhtml-webpack-plugin","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":114,"end":123,"href":"https:\u002F\u002Fgithub.com\u002Famireh\u002Fhappypack","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":125,"end":147,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack-dev-middleware","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_21":{"__typename":"Paragraph","id":"ba0da8cb63e4_21","name":"524e","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Webpack 4 has a new mode field that applies certain optimizations by default. This post by Webpack founder Tobias Koppers gave us all the necessary information. For instance, we removed extraneous plugins like NoEmitOnErrorsPlugin.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":20,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":83,"end":87,"href":"https:\u002F\u002Fmedium.com\u002Fwebpack\u002Fwebpack-4-mode-and-optimization-5423a6bc597a","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_22":{"__typename":"Paragraph","id":"ba0da8cb63e4_22","name":"65c2","type":"ULI","href":null,"layout":null,"metadata":null,"text":"We needed to migrate our old usage of CommonsChunkPlugin over to SplitChunksPlugin before investing more into code splitting. This required reading this gist describing the difference between the two plugins and then reading the docs. It took us several rounds of reading and playing around with the code for us to understand the new concepts. Our old setting looked like this:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":153,"end":157,"href":"https:\u002F\u002Fgist.github.com\u002Fsokra\u002F1522d586b8e5c0f5072d7565c2bee693","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":229,"end":233,"href":"https:\u002F\u002Fwebpack.js.org\u002Fplugins\u002Fsplit-chunks-plugin\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_23":{"__typename":"Paragraph","id":"ba0da8cb63e4_23","name":"f54f","type":"PRE","href":null,"layout":null,"metadata":null,"text":"new webpack.optimize.CommonsChunkPlugin({\n name: 'app',\n async: true,\n children: true,\n minChunks: 3,\n})","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_24":{"__typename":"Paragraph","id":"ba0da8cb63e4_24","name":"a55b","type":"P","href":null,"layout":null,"metadata":null,"text":"Which translates to “create a single async common chunk that contains code common to 3+ async splits.” This translates to the following SplitChunksPlugin setting in config.optimizations.splitChunks.cacheGroups:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":165,"end":209,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_25":{"__typename":"Paragraph","id":"ba0da8cb63e4_25","name":"1ac0","type":"PRE","href":null,"layout":null,"metadata":null,"text":"{\n …\n commons: {\n chunks: 'async',\n name: 'asyncCommonJS',\n minChunks: 3,\n \u002F\u002F Ignores `minSize`, `maxSize`, and other defaults.\n enforce: true,\n priority: 0,\n },\n \u002F\u002F The next 2 lines disable the 2 default `cacheGroups`, which are specified in\n \u002F\u002F https:\u002F\u002Fwebpack.js.org\u002Fplugins\u002Fsplit-chunks-plugin\u002F#optimization-splitchunks\n default: false,\n vendor: false,\n …\n}","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":270,"end":346,"href":"https:\u002F\u002Fwebpack.js.org\u002Fplugins\u002Fsplit-chunks-plugin\u002F#optimization-splitchunks","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_26":{"__typename":"Paragraph","id":"ba0da8cb63e4_26","name":"9d4f","type":"ULI","href":null,"layout":null,"metadata":null,"text":"We needed to change require paths for various Webpack internal files that had been refactored to import the correct files. For instance,require('webpack\u002Fschemas\u002FwebpackOptionsSchema.json') -\u003E require('webpack\u002Fschemas\u002FWebpackOptions.json')","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":136,"end":238,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_27":{"__typename":"Paragraph","id":"ba0da8cb63e4_27","name":"4dbf","type":"H3","href":null,"layout":null,"metadata":null,"text":"Unknown Unknowns","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_28":{"__typename":"Paragraph","id":"ba0da8cb63e4_28","name":"fb2e","type":"P","href":null,"layout":null,"metadata":null,"text":"A variety of things we classify as unknown unknowns surprised us In the process of upgrading. In every upgrade, unknown unknowns will pop up: it is our job to understand the root cause so we can apply fixes from a position of knowledge.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_29":{"__typename":"Paragraph","id":"ba0da8cb63e4_29","name":"53b3","type":"H4","href":null,"layout":null,"metadata":null,"text":"JSON modules","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_30":{"__typename":"Paragraph","id":"ba0da8cb63e4_30","name":"f633","type":"P","href":null,"layout":null,"metadata":null,"text":"Webpack 4 now by default regards files with .json extension as JSON modules:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*ftpTtI0GLr-AUb2R":{"__typename":"ImageMetadata","id":"0*ftpTtI0GLr-AUb2R","originalHeight":130,"originalWidth":1288,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:ba0da8cb63e4_31":{"__typename":"Paragraph","id":"ba0da8cb63e4_31","name":"df75","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*ftpTtI0GLr-AUb2R"},"text":"Source from Webpack 4 changelogs","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":6,"href":"https:\u002F\u002Fmedium.com\u002Fwebpack\u002Fwebpack-4-released-today-6cdb994702d4","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_32":{"__typename":"Paragraph","id":"ba0da8cb63e4_32","name":"cc0b","type":"P","href":null,"layout":null,"metadata":null,"text":"This turned out not to play nicely with our usage of bundle-loader, which we used for lazy loading JSON. See this issue for more details. The fix is to force files with .json extensions to use json-loader, which does work with bundle-loader:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":53,"end":66,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fbundle-loader","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":109,"end":113,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fbundle-loader\u002Fissues\u002F74","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":193,"end":204,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fjson-loader","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_33":{"__typename":"Paragraph","id":"ba0da8cb63e4_33","name":"fca6","type":"PRE","href":null,"layout":null,"metadata":null,"text":"{\n test: \u002F\\.json$\u002F,\n loader: 'json-loader',\n type: 'javascript\u002Fauto',\n}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_34":{"__typename":"Paragraph","id":"ba0da8cb63e4_34","name":"179b","type":"H4","href":null,"layout":null,"metadata":null,"text":"CSS Bundling","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_35":{"__typename":"Paragraph","id":"ba0da8cb63e4_35","name":"9f0c","type":"P","href":null,"layout":null,"metadata":null,"text":"We previously used extract-text-webpack-plugin to bundle all our CSS into a single file. This library is no longer recommended for Webpack 4 CSS support [see here and here]. As other folks have reported success with Webpack 4, we tried it anyway. This mostly worked, except the CSS import order was no longer respected. Unfortunately we relied upon the cascading nature of CSS for style overrides in certain cases, making it necessary to respect CSS ordering.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":19,"end":46,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fextract-text-webpack-plugin","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":158,"end":162,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fextract-text-webpack-plugin\u002Fissues\u002F701","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":167,"end":171,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fextract-text-webpack-plugin\u002Fissues\u002F749","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_36":{"__typename":"Paragraph","id":"ba0da8cb63e4_36","name":"6615","type":"P","href":null,"layout":null,"metadata":null,"text":"This issue was a common theme with extract-text-webpack-plugin [e.g., see here], so we bit the bullet and migrated to mini-css-extract-plugin.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":74,"end":78,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fextract-text-webpack-plugin\u002Fissues\u002F745","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":118,"end":141,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fmini-css-extract-plugin","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_37":{"__typename":"Paragraph","id":"ba0da8cb63e4_37","name":"528b","type":"P","href":null,"layout":null,"metadata":null,"text":"The config changes are as follows:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_38":{"__typename":"Paragraph","id":"ba0da8cb63e4_38","name":"d767","type":"PRE","href":null,"layout":null,"metadata":null,"text":"new ExtractTextPlugin({\n filename: [name].[chunkhash].css,\n allChunks: true,\n disable: isDev(),\n})","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_39":{"__typename":"Paragraph","id":"ba0da8cb63e4_39","name":"a125","type":"P","href":null,"layout":null,"metadata":null,"text":"is now","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_40":{"__typename":"Paragraph","id":"ba0da8cb63e4_40","name":"db22","type":"PRE","href":null,"layout":null,"metadata":null,"text":"new MiniCssExtractPlugin({\n filename: ‘[name].[chunkhash].css’,\n})","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_41":{"__typename":"Paragraph","id":"ba0da8cb63e4_41","name":"ebba","type":"P","href":null,"layout":null,"metadata":null,"text":"along with the following option in optimizations.splitChunks.cacheGroups:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":35,"end":72,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_42":{"__typename":"Paragraph","id":"ba0da8cb63e4_42","name":"73b8","type":"PRE","href":null,"layout":null,"metadata":null,"text":"{\n name: 'allStyles',\n test: (m: Module) =\u003E m.constructor.name === 'CssModule',\n chunks: 'all',\n enforce: true,\n priority: 1,\n}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_43":{"__typename":"Paragraph","id":"ba0da8cb63e4_43","name":"8f63","type":"P","href":null,"layout":null,"metadata":null,"text":"We needed to use the test property to test on CssModule rather than looking for the .css extension because we use Stylus in our codebase.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_44":{"__typename":"Paragraph","id":"ba0da8cb63e4_44","name":"15b3","type":"P","href":null,"layout":null,"metadata":null,"text":"After this change, we also faced this issue with the plugin generating an additional Javascript file stealing the original entrypoint. We modified our usage of html-webpack-include-assets-plugin to also include the additional Javascript file to unbreak module loading.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":33,"end":37,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fmini-css-extract-plugin\u002Fissues\u002F147","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":38,"end":43,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack\u002Fissues\u002F7300#issuecomment-399225385","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":160,"end":194,"href":"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fhtml-webpack-include-assets-plugin","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_45":{"__typename":"Paragraph","id":"ba0da8cb63e4_45","name":"0de7","type":"H4","href":null,"layout":null,"metadata":null,"text":"Larger stats.json output","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_46":{"__typename":"Paragraph","id":"ba0da8cb63e4_46","name":"6b8a","type":"P","href":null,"layout":null,"metadata":null,"text":"We generate a Webpack stats.json file with every Webpack build as Rapidos uses the information on what files were bundled for visualization with webpack-bundle-visualizer and to understand the transitive dependencies of each app. We got errors that looked like RangeError: Invalid string length, which after a search were revealed to be an issue with attempting to create too large a string from a JSON object. The exact nature of the issue was fairly obscure: it looks like Webpack 4 refactored the stats object format, which made the object a lot larger by default [source]. The source of this increase, issuerPath, is not configurable. After some experimenting, we changed our StatsPlugin configuration to the following:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":261,"end":294,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":22,"end":32,"href":"https:\u002F\u002Fwebpack.js.org\u002Fconfiguration\u002Fstats\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":145,"end":170,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack-contrib\u002Fwebpack-bundle-analyzer","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":310,"end":316,"href":"https:\u002F\u002Fgithub.com\u002Fnodejs\u002Fnode\u002Fissues\u002F13465","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":568,"end":574,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack\u002Fpull\u002F5926\u002Ffiles#diff-baf371f5446dc9bc4b41022587e05b48R342","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_47":{"__typename":"Paragraph","id":"ba0da8cb63e4_47","name":"d6ba","type":"PRE","href":null,"layout":null,"metadata":null,"text":"modules: true,\nchunks: true,\ntimings: false,\nsource: false,\nreasons: true,","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_48":{"__typename":"Paragraph","id":"ba0da8cb63e4_48","name":"01ef","type":"P","href":null,"layout":null,"metadata":null,"text":"which still gave us the relevant information while keeping the file small enough to be produced.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_49":{"__typename":"Paragraph","id":"ba0da8cb63e4_49","name":"2f02","type":"H4","href":null,"layout":null,"metadata":null,"text":"Webpack-multi-output and undocumented hooks usage","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_50":{"__typename":"Paragraph","id":"ba0da8cb63e4_50","name":"9f2a","type":"P","href":null,"layout":null,"metadata":null,"text":"We use webpack-multi-output to generate multiple outputs for a single configuration. Each chunk that passes through this plugin may generate multiple chunks, one per locale. The Webpack chunk loading script then needs to be modified to make things work. In previous versions, we made use of an undocumented hook to do this:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":7,"end":27,"href":"https:\u002F\u002Fgithub.com\u002Fcoursera\u002Fwebpack-multi-output","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":294,"end":311,"href":"https:\u002F\u002Fgithub.com\u002Fcoursera\u002Fwebpack-multi-output\u002Fblob\u002Fmaster\u002Fwhat.md#jsonp-script","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:b99ff998db6faead769453dbe78f7636":{"__typename":"MediaResource","id":"b99ff998db6faead769453dbe78f7636","iframeSrc":"","iframeHeight":0,"iframeWidth":0,"title":"webpack3_multioutput.js"},"Paragraph:ba0da8cb63e4_51":{"__typename":"Paragraph","id":"ba0da8cb63e4_51","name":"a41b","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"Webpack 3 jsonp script hack for webpack-multi-output","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:b99ff998db6faead769453dbe78f7636"}},"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_52":{"__typename":"Paragraph","id":"ba0da8cb63e4_52","name":"dd12","type":"P","href":null,"layout":null,"metadata":null,"text":"Access to this hook is no longer allowed in Webpack 4, so we had to use the mainTemplate.hooks.render hook along with an undocumented stage flag to make this work. It now looks like this:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":76,"end":101,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":134,"end":139,"href":"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Ftapable#hookhookmap-interface","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":153,"end":157,"href":"https:\u002F\u002Fgithub.com\u002Fcoursera\u002Fwebpack-multi-output\u002Fcommit\u002F72135b54a863fc680ebfe5df40ee60afa7dcb40d#diff-a4f485aa834ca5b3c24819fceb39c56fR164","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:02f7b2d4d38fe7454f19b72e942e32a0":{"__typename":"MediaResource","id":"02f7b2d4d38fe7454f19b72e942e32a0","iframeSrc":"","iframeHeight":0,"iframeWidth":0,"title":"webpack4_multioutput.js"},"Paragraph:ba0da8cb63e4_53":{"__typename":"Paragraph","id":"ba0da8cb63e4_53","name":"78d4","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"webpack-multi-output jsonp script hack for Webpack 4","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:02f7b2d4d38fe7454f19b72e942e32a0"}},"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_54":{"__typename":"Paragraph","id":"ba0da8cb63e4_54","name":"9902","type":"P","href":null,"layout":null,"metadata":null,"text":"We want to stop using webpack-multi-output in the near future — this hack reduces bus factor, makes future upgrades hard, and disempowers non-experts who want to make changes.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_55":{"__typename":"Paragraph","id":"ba0da8cb63e4_55","name":"4ff3","type":"H3","href":null,"layout":null,"metadata":null,"text":"What did we get out of this upgrade?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_56":{"__typename":"Paragraph","id":"ba0da8cb63e4_56","name":"cfa3","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Build times are faster. In lazy loading cases, we’ve seen incremental compilation of one of our apps go from ~10s in Webpack 3 to ~2.5s in Webpack 4. Another app went from ~30s to ~20s. In production bundling, we saw a 10–30% decrease in the cold cache case, and a ~50–60% decrease with Uglify cache.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_57":{"__typename":"Paragraph","id":"ba0da8cb63e4_57","name":"0147","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Bundle sizes are roughly identical.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_58":{"__typename":"Paragraph","id":"ba0da8cb63e4_58","name":"373c","type":"ULI","href":null,"layout":null,"metadata":null,"text":"We’ve reduced our dependency on deprecated, unmaintained, or outdated plugins.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_59":{"__typename":"Paragraph","id":"ba0da8cb63e4_59","name":"c826","type":"ULI","href":null,"layout":null,"metadata":null,"text":"We are now confident building on top of Webpack — through reading the source code of Webpack, keeping up with recent developments, and having a better mental image of Webpack internals [e.g., chunk graph algorithm, split chunks plugin], we now feel empowered to take full advantage of Webpack.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":192,"end":213,"href":"https:\u002F\u002Fmedium.com\u002Fwebpack\u002Fthe-chunk-graph-algorithm-week-26-29-7c88aa5e4b4e","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":215,"end":234,"href":"https:\u002F\u002Fgist.github.com\u002Fsokra\u002F1522d586b8e5c0f5072d7565c2bee693","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:ba0da8cb63e4_60":{"__typename":"Paragraph","id":"ba0da8cb63e4_60","name":"6946","type":"P","href":null,"layout":null,"metadata":null,"text":"That’s all — we hope you enjoyed following along with Coursera’s journey upgrading from Webpack 3 to Webpack 4. We went through trials and tribulations, but think the final outcome was worth the effort.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:532b19e4043c-viewerId:lo_0ffc54a084ed":{"__typename":"CollectionViewerEdge","id":"collectionId:532b19e4043c-viewerId:lo_0ffc54a084ed","isEditor":false,"isMuting":false},"UserViewerEdge:userId:70814e310ce3-viewerId:lo_0ffc54a084ed":{"__typename":"UserViewerEdge","id":"userId:70814e310ce3-viewerId:lo_0ffc54a084ed","isMuting":false},"ImageMetadata:1*zXjOKA4JKHH04Ipi2NI0jA.png":{"__typename":"ImageMetadata","id":"1*zXjOKA4JKHH04Ipi2NI0jA.png","originalWidth":1156,"originalHeight":164},"PostViewerEdge:postId:cdfeb817faf8-viewerId:lo_0ffc54a084ed":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:cdfeb817faf8-viewerId:lo_0ffc54a084ed"},"Tag:webpack":{"__typename":"Tag","id":"webpack","displayTitle":"Webpack","normalizedTagSlug":"webpack"},"Tag:coursera":{"__typename":"Tag","id":"coursera","displayTitle":"Coursera","normalizedTagSlug":"coursera"},"Tag:frontend":{"__typename":"Tag","id":"frontend","displayTitle":"Frontend","normalizedTagSlug":"frontend"},"Tag:upgrade":{"__typename":"Tag","id":"upgrade","displayTitle":"Upgrade","normalizedTagSlug":"upgrade"},"Tag:infrastructure":{"__typename":"Tag","id":"infrastructure","displayTitle":"Infrastructure","normalizedTagSlug":"infrastructure"},"Post:cdfeb817faf8":{"__typename":"Post","id":"cdfeb817faf8","collection":{"__ref":"Collection:532b19e4043c"},"content({\"postMeteringOptions\":{\"referrer\":\"\"}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"7876","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:ba0da8cb63e4_0"},{"__ref":"Paragraph:ba0da8cb63e4_1"},{"__ref":"Paragraph:ba0da8cb63e4_2"},{"__ref":"Paragraph:ba0da8cb63e4_3"},{"__ref":"Paragraph:ba0da8cb63e4_4"},{"__ref":"Paragraph:ba0da8cb63e4_5"},{"__ref":"Paragraph:ba0da8cb63e4_6"},{"__ref":"Paragraph:ba0da8cb63e4_7"},{"__ref":"Paragraph:ba0da8cb63e4_8"},{"__ref":"Paragraph:ba0da8cb63e4_9"},{"__ref":"Paragraph:ba0da8cb63e4_10"},{"__ref":"Paragraph:ba0da8cb63e4_11"},{"__ref":"Paragraph:ba0da8cb63e4_12"},{"__ref":"Paragraph:ba0da8cb63e4_13"},{"__ref":"Paragraph:ba0da8cb63e4_14"},{"__ref":"Paragraph:ba0da8cb63e4_15"},{"__ref":"Paragraph:ba0da8cb63e4_16"},{"__ref":"Paragraph:ba0da8cb63e4_17"},{"__ref":"Paragraph:ba0da8cb63e4_18"},{"__ref":"Paragraph:ba0da8cb63e4_19"},{"__ref":"Paragraph:ba0da8cb63e4_20"},{"__ref":"Paragraph:ba0da8cb63e4_21"},{"__ref":"Paragraph:ba0da8cb63e4_22"},{"__ref":"Paragraph:ba0da8cb63e4_23"},{"__ref":"Paragraph:ba0da8cb63e4_24"},{"__ref":"Paragraph:ba0da8cb63e4_25"},{"__ref":"Paragraph:ba0da8cb63e4_26"},{"__ref":"Paragraph:ba0da8cb63e4_27"},{"__ref":"Paragraph:ba0da8cb63e4_28"},{"__ref":"Paragraph:ba0da8cb63e4_29"},{"__ref":"Paragraph:ba0da8cb63e4_30"},{"__ref":"Paragraph:ba0da8cb63e4_31"},{"__ref":"Paragraph:ba0da8cb63e4_32"},{"__ref":"Paragraph:ba0da8cb63e4_33"},{"__ref":"Paragraph:ba0da8cb63e4_34"},{"__ref":"Paragraph:ba0da8cb63e4_35"},{"__ref":"Paragraph:ba0da8cb63e4_36"},{"__ref":"Paragraph:ba0da8cb63e4_37"},{"__ref":"Paragraph:ba0da8cb63e4_38"},{"__ref":"Paragraph:ba0da8cb63e4_39"},{"__ref":"Paragraph:ba0da8cb63e4_40"},{"__ref":"Paragraph:ba0da8cb63e4_41"},{"__ref":"Paragraph:ba0da8cb63e4_42"},{"__ref":"Paragraph:ba0da8cb63e4_43"},{"__ref":"Paragraph:ba0da8cb63e4_44"},{"__ref":"Paragraph:ba0da8cb63e4_45"},{"__ref":"Paragraph:ba0da8cb63e4_46"},{"__ref":"Paragraph:ba0da8cb63e4_47"},{"__ref":"Paragraph:ba0da8cb63e4_48"},{"__ref":"Paragraph:ba0da8cb63e4_49"},{"__ref":"Paragraph:ba0da8cb63e4_50"},{"__ref":"Paragraph:ba0da8cb63e4_51"},{"__ref":"Paragraph:ba0da8cb63e4_52"},{"__ref":"Paragraph:ba0da8cb63e4_53"},{"__ref":"Paragraph:ba0da8cb63e4_54"},{"__ref":"Paragraph:ba0da8cb63e4_55"},{"__ref":"Paragraph:ba0da8cb63e4_56"},{"__ref":"Paragraph:ba0da8cb63e4_57"},{"__ref":"Paragraph:ba0da8cb63e4_58"},{"__ref":"Paragraph:ba0da8cb63e4_59"},{"__ref":"Paragraph:ba0da8cb63e4_60"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:70814e310ce3"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fmedium.com\u002Fcoursera-engineering\u002Fwebpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"javascript"},{"__typename":"Topic","slug":"programming"}],"isLimitedState":false,"isPublished":true,"allowResponses":true,"latestPublishedVersion":"ba0da8cb63e4","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":1},"responseDistribution":"NOT_DISTRIBUTED","clapCount":271,"title":"Webpack 3 to 4: Facing the known unknowns and unknown unknowns","isSeries":false,"sequence":null,"uniqueSlug":"webpack-3-to-4-facing-the-known-unknowns-and-unknown-unknowns-cdfeb817faf8","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application. We hope this is either an entertaining recollection or helpful for your own future upgrades…","latestPublishedAt":1539259262474,"readingTime":6.077672955974843,"previewContent":{"__typename":"PreviewContent","subtitle":"This post will sketch out what a Webpack 3 to 4 upgrade looks like in a large modern web application."},"previewImage":{"__ref":"ImageMetadata:0*Inb_k0uJHCmGBr2_"},"isShortform":false,"seoTitle":"","firstPublishedAt":1539259262474,"updatedAt":1539272004535,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:cdfeb817faf8-viewerId:lo_0ffc54a084ed"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:webpack"},{"__ref":"Tag:coursera"},{"__ref":"Tag:frontend"},{"__ref":"Tag:upgrade"},{"__ref":"Tag:infrastructure"}],"isFeaturedInPublishedPublication":false,"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":1509,"layerCake":4,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"HIT"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.71c31feb.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.dc6eb533.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.5bef8967.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4505.6dfaf853.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9380.fb176dee.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.dc8dbee4.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.933c1c9a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.68bc318b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3045.1cc3d8cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6349.3329b100.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.67b7130d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6428.7d30b23c.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6199.c727247b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.7d9f7f3d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.e8706ba8.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.8aa8d357.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4492.0c3e1a1d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2571.6814b962.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.1c286b32.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6128.f8800a13.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2135.2e8dc177.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.60bcefe8.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/144.86429b48.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5240.6281357f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8819.c627c2bf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.d0637ed0.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.390e9ec3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.0d800846.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.18a8996d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.e1e580cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/responses.editor.e89462cb.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'914c0a926fc29b9c',t:'MTc0MDAyODc2Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>