1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.63931add5202040a4ec1.css" data-identity="gatsby-global-css">@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:100;src:local("Montserrat Thin "),local("Montserrat-Thin"),url(/static/montserrat-latin-100-8d7d79679b70dbe27172b6460e7a7910.woff2) format("woff2"),url(/static/montserrat-latin-100-ec38980a9e0119a379e2a9b3dbb1901a.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:100;src:local("Montserrat Thin italic"),local("Montserrat-Thinitalic"),url(/static/montserrat-latin-100italic-e279051046ba1286706adc886cf1c96b.woff2) format("woff2"),url(/static/montserrat-latin-100italic-3b325a3173c8207435cd1b76e19bf501.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:200;src:local("Montserrat Extra Light "),local("Montserrat-Extra Light"),url(/static/montserrat-latin-200-9d266fbbfa6cab7009bd56003b1eeb67.woff2) format("woff2"),url(/static/montserrat-latin-200-2d8ba08717110d27122e54c34b8a5798.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:200;src:local("Montserrat Extra Light italic"),local("Montserrat-Extra Lightitalic"),url(/static/montserrat-latin-200italic-6e5b3756583bb2263eb062eae992735e.woff2) format("woff2"),url(/static/montserrat-latin-200italic-a0d6f343e4b536c582926255367a57da.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:300;src:local("Montserrat Light "),local("Montserrat-Light"),url(/static/montserrat-latin-300-00b3e893aab5a8fd632d6342eb72551a.woff2) format("woff2"),url(/static/montserrat-latin-300-ea303695ceab35f17e7d062f30e0173b.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:300;src:local("Montserrat Light italic"),local("Montserrat-Lightitalic"),url(/static/montserrat-latin-300italic-56f34ea368f6aedf89583d444bbcb227.woff2) format("woff2"),url(/static/montserrat-latin-300italic-54b0bf2c8c4c12ffafd803be2466a790.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:400;src:local("Montserrat Regular "),local("Montserrat-Regular"),url(/static/montserrat-latin-400-b71748ae4f80ec8c014def4c5fa8688b.woff2) format("woff2"),url(/static/montserrat-latin-400-0659a9f4e90db5cf51b50d005bff1e41.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:400;src:local("Montserrat Regular italic"),local("Montserrat-Regularitalic"),url(/static/montserrat-latin-400italic-6eed6b4cbb809c6efc7aa7ddad6dbe3e.woff2) format("woff2"),url(/static/montserrat-latin-400italic-7583622cfde30ae49086d18447ab28e7.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:500;src:local("Montserrat Medium "),local("Montserrat-Medium"),url(/static/montserrat-latin-500-091b209546e16313fd4f4fc36090c757.woff2) format("woff2"),url(/static/montserrat-latin-500-edd311588712a96bbf435fad264fff62.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:500;src:local("Montserrat Medium italic"),local("Montserrat-Mediumitalic"),url(/static/montserrat-latin-500italic-c90ced68b46050061d1a41842d6dfb43.woff2) format("woff2"),url(/static/montserrat-latin-500italic-5146cbfe02b1deea5dffea27a5f2f998.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:600;src:local("Montserrat SemiBold "),local("Montserrat-SemiBold"),url(/static/montserrat-latin-600-0480d2f8a71f38db8633b84d8722e0c2.woff2) format("woff2"),url(/static/montserrat-latin-600-b77863a375260a05dd13f86a1cee598f.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:600;src:local("Montserrat SemiBold italic"),local("Montserrat-SemiBolditalic"),url(/static/montserrat-latin-600italic-cf46ffb11f3a60d7df0567f8851a1d00.woff2) format("woff2"),url(/static/montserrat-latin-600italic-c4fcfeeb057724724097167e57bd7801.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:700;src:local("Montserrat Bold "),local("Montserrat-Bold"),url(/static/montserrat-latin-700-7dbcc8a5ea2289d83f657c25b4be6193.woff2) format("woff2"),url(/static/montserrat-latin-700-99271a835e1cae8c76ef8bba99a8cc4e.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:700;src:local("Montserrat Bold italic"),local("Montserrat-Bolditalic"),url(/static/montserrat-latin-700italic-c41ad6bdb4bd504a843d546d0a47958d.woff2) format("woff2"),url(/static/montserrat-latin-700italic-6779372f04095051c62ed36bc1dcc142.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:800;src:local("Montserrat ExtraBold "),local("Montserrat-ExtraBold"),url(/static/montserrat-latin-800-db9a3e0ba7eaea32e5f55328ace6cf23.woff2) format("woff2"),url(/static/montserrat-latin-800-4e3c615967a2360f5db87d2f0fd2456f.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:800;src:local("Montserrat ExtraBold italic"),local("Montserrat-ExtraBolditalic"),url(/static/montserrat-latin-800italic-bf45bfa14805969eda318973947bc42b.woff2) format("woff2"),url(/static/montserrat-latin-800italic-fe82abb0bcede51bf724254878e0c374.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:900;src:local("Montserrat Black "),local("Montserrat-Black"),url(/static/montserrat-latin-900-e66c7edc609e24bacbb705175669d814.woff2) format("woff2"),url(/static/montserrat-latin-900-8211f418baeb8ec880b80ba3c682f957.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:900;src:local("Montserrat Black italic"),local("Montserrat-Blackitalic"),url(/static/montserrat-latin-900italic-4454c775e48152c1a72510ceed3603e2.woff2) format("woff2"),url(/static/montserrat-latin-900italic-efcaa0f6a82ee0640b83a0916e6e8d68.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:normal;font-weight:300;src:local("Merriweather Light "),local("Merriweather-Light"),url(/static/merriweather-latin-300-fc117160c69a8ea0851b26dd14748ee4.woff2) format("woff2"),url(/static/merriweather-latin-300-58b18067ebbd21fda77b67e73c241d3b.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:italic;font-weight:300;src:local("Merriweather Light italic"),local("Merriweather-Lightitalic"),url(/static/merriweather-latin-300italic-fe29961474f8dbf77c0aa7b9a629e4bc.woff2) format("woff2"),url(/static/merriweather-latin-300italic-23c3f1f88683618a4fb8d265d33d383a.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:normal;font-weight:400;src:local("Merriweather Regular "),local("Merriweather-Regular"),url
1(/static/merriweather-latin-400-d9479e8023bef9cbd9bf8d6eabd6bf36.woff2) format("woff2"),url(/static/merriweather-latin-400-040426f99ff6e00b86506452e0d1f10b.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:italic;font-weight:400;src:local("Merriweather Regular italic"),local("Merriweather-Regularitalic"),url(/static/merriweather-latin-400italic-2de7bfeaf08fb03d4315d49947f062f7.woff2) format("woff2"),url(/static/merriweather-latin-400italic-79db67aca65f5285964ab332bd65f451.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:normal;font-weight:700;src:local("Merriweather Bold "),local("Merriweather-Bold"),url(/static/merriweather-latin-700-4b08e01d805fa35d7bf777f1b24314ae.woff2) format("woff2"),url(/static/merriweather-latin-700-22fb8afba4ab1f093b6ef9e28a9b6e92.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:italic;font-weight:700;src:local("Merriweather Bold italic"),local("Merriweather-Bolditalic"),url(/static/merriweather-latin-700italic-cd92541b177652fffb6e3b952f1c33f1.woff2) format("woff2"),url(/static/merriweather-latin-700italic-f87f3d87cea0dd0979bfc8ac9ea90243.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:normal;font-weight:900;src:local("Merriweather Black "),local("Merriweather-Black"),url(/static/merriweather-latin-900-f813fc6a4bee46eda5224ac7ebf1b7be.woff2) format("woff2"),url(/static/merriweather-latin-900-5d4e42cb44410674acd99153d57df032.woff) format("woff")}@font-face{font-display:swap;font-family:Merriweather;font-style:italic;font-weight:900;src:local("Merriweather Black italic"),local("Merriweather-Blackitalic"),url(/static/merriweather-latin-900italic-b7901d85486871c1779c0e93ddd85656.woff2) format("woff2"),url(/static/merriweather-latin-900italic-9647f9fdab98756989a8a5550eb205c3.woff) format("woff")} 2 3 4/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden]{display:none}:root{--maxWidth-none:"none";--maxWidth-xs:20rem;--maxWidth-sm:24rem;--maxWidth-md:28rem;--maxWidth-lg:32rem;--maxWidth-xl:36rem;--maxWidth-2xl:50rem;--maxWidth-3xl:48rem;--maxWidth-4xl:56rem;--maxWidth-full:"100%";--maxWidth-wrapper:var(--maxWidth-2xl);--spacing-px:"1px";--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-32:8rem;--fontFamily-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-body:var(--fontFamily-sans);--font-heading:var(--fontFamily-sans);--fontWeight-normal:400;--fontWeight-medium:500;--fontWeight-semibold:600;--fontWeight-bold:700;--fontWeight-extrabold:800;--fontWeight-black:900;--fontSize-root:16px;--lineHeight-none:1;--lineHeight-tight:1.1;--lineHeight-normal:1.5;--lineHeight-relaxed:2;--fontSize-0:0.833rem;--fontSize-1:1rem;--fontSize-2:1.2rem;--fontSize-3:1.44rem;--fontSize-4:1.728rem;--fontSize-5:2.074rem;--fontSize-6:2.488rem;--fontSize-7:2.986rem;--color-primary:#3d516d;--color-text:#455260;--color-text-light:#4f5969;--color-heading:#3d516d;--color-heading-black:#3d516d;--color-accent:#d1dce5;--color-text-select:#b5d6fc;--color-tag:#2196f3}*,:after,:before{box-sizing:border-box}::selection{background:var(--color-text-select)}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--fontSize-root);line-height:var(--lineHeight-normal)}body{background:#f0f0f0;color:var(--color-text);font-family:var(--font-body);font-size:var(--fontSize-1)}footer{padding:var(--spacing-6) var(--spacing-0)}hr{background:var(--color-accent);border:0;height:1px}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.025em;line-height:var(--lineHeight-tight);margin-bottom:var(--spacing-6);margin-top:var(--spacing-12)}h2,h3,h4,h5,h6{color:var(--color-heading);font-weight:var(--fontWeight-bold)}h1{color:var(--color-heading-black);font-size:var(--fontSize-6);font-weight:var(--fontWeight-black)}h2{font-size:var(--fontSize-5)}h3{font-size:var(--fontSize-4)}h4{font-size:var(--fontSize-3)}h5{font-size:var(--fontSize-2)}h6{font-size:var(--fontSize-1)}h1>a,h2>a,h3>a,h4>a,h5>a,h6>a{color:inherit;text-decoration:none}p{--baseline-multiplier:0.179;--x-height-multiplier:0.35;line-height:var(--lineHeight-relaxed);margin:var(--spacing-0) var(--spacing-0) var(--spacing-8) var(--spacing-0)}ol,p,ul{padding:var(--spacing-0)}ol,ul{list-style-image:none;list-style-position:outside;margin-bottom:var(--spacing-8);margin-left:var(--spacing-0);margin-right:var(--spacing-0)}ol li,ul li{margin-bottom:calc(var(--spacing-8)/2);padding-left:var(--spacing-0)}article ol li,article ul li{margin-left:var(--fontSize-1)}li>p{margin-bottom:calc(var(--spacing-8)/2)}li :last-child{margin-bottom:var(--spacing-0)}li>ul{margin-left:var(--spacing-8);margin-top:calc(var(--spacing-8)/2)}blockquote{border-left:var(--spacing-1) solid var(--color-primary);color:var(--color-text-light);font-size:var(--fontSize-2);font-style:italic;margin-bottom:var(--spacing-8);margin-left:calc(var(--spacing-6)*-1);margin-right:var(--spacing-8);padding:var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-6)}blockquote>:last-child{margin-bottom:var(--spacing-0)}blockquote>ol,blockquote>ul{list-style-position:inside}table{border-collapse:collapse;border-spacing:.25rem;margin-bottom:var(--spacing-8);width:100%}table tbody tr td,table thead tr th{border-bottom:1px solid var(--color-accent);padding:var(--spacing-2);text-align:left}a{color:var(--color-primary)}a:focus,a:hover{text-decoration:none}.global-wrapper{margin:var(--spacing-0) auto;max-width:var(--maxWidth-wrapper);padding:var(--spacing-10) var(--spacing-5)}.global-wrapper[data-is-root-path=true] .bio{margin-bottom:var(--spacing-20)}.global-header{margin-bottom:var(--spacing-12)}.main-heading{font-size:var(--fontSize-7);margin:0}.post-list-item{margin-bottom:var(--spacing-8);margin-top:var(--spacing-8)}.post-list-item p{margin-bottom:var(--spacing-0)}.post-list-item h2{color:var(--color-primary);font-size:var(--fontSize-4);margin-bottom:var(--spacing-2);margin-top:var(--spacing-0)}.post-list-item header{margin-bottom:var(--spacing-4)}.header-link-home{font-family:var(--font-heading);font-size:var(--fontSize-2);font-weight:var(--fontWeight-bold);text-decoration:none}.bio{display:flex;margin-bottom:var(--spacing-16)}.bio-avatar,.bio p{margin-bottom:var(--spacing-0)}.bio-avatar{border-radius:100%;margin-right:var(--spacing-4);min-width:50px}.blog-post header h1{margin:var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0)}.blog-post header p{font-family:var(--font-heading);font-size:var(--fontSize-2)}.blog-post-nav ul{margin:var(--spacing-0)}.gatsby-highlight{margin-bottom:var(--spacing-8)}iframe:not([src]){display:none}@media (max-width:42rem){blockquote{margin-left:var(--spacing-0);padding:var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-4)}ol,ul{list-style-position:inside}}code[class*=language-],pre[class*=language-]{word-wrap:normal;background:none;color:#000;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{background:#b3d4fc;text-shadow:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{background:hsla(0,0%,100%,.5);color:#9a6e3a}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.index-module--tags--2cZA8{margin-left:var(--spacing-3)}.index-module--tag--HB8uS{background:#ddd;border-radius:2px;color:var(--color-primary);display:inline-block;font-size:10px;padding:0 var(--spacing-1)}.index-module--tag--HB8uS:not(:first-child){margin-left:var(--spacing-1)}.blog-post-module--tags--22imv{margin-left:var(--spacing-6)}.blog-post-module--tag--bowv_{background:#fbfbfb;border-radius:3px;font-size:var(--fontSize-1);padding:var(--spacing-1) var(--spacing-2)}.blog-post-module--tag--bowv_:not(:first-child){margin-left:var(--spacing-1)}</style><meta name="generator" content="Gatsby 3.10.2"/><link rel="sitemap" type="application/xml" href="/sitemap/sitemap-index.xml"/><style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript>
4<script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){if(void 0===e.target.dataset.mainImage)return;if(void 0===e.target.dataset.gatsbyImageSsr)return;const t=e.target;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);</script>
4<style type="text/css"> 5 .anchor.before { 6 position: absolute; 7 top: 0; 8 left: 0; 9 transform: translateX(-100%); 10 padding-right: 4px; 11 } 12 .anchor.after { 13 display: inline-block; 14 padding-left: 4px; 15 } 16 h1 .anchor svg, 17 h2 .anchor svg, 18 h3 .anchor svg, 19 h4 .anchor svg, 20 h5 .anchor svg, 21 h6 .anchor svg { 22 visibility: hidden; 23 } 24 h1:hover .anchor svg, 25 h2:hover .anchor svg, 26 h3:hover .anchor svg, 27 h4:hover .anchor svg, 28 h5:hover .anchor svg, 29 h6:hover .anchor svg, 30 h1 .anchor:focus svg, 31 h2 .anchor:focus svg, 32 h3 .anchor:focus svg, 33 h4 .anchor:focus svg, 34 h5 .anchor:focus svg, 35 h6 .anchor:focus svg { 36 visibility: visible; 37 } 38 </style>
38<script> 39 document.addEventListener("DOMContentLoaded", function(event) { 40 var hash = window.decodeURI(location.hash.replace('#', '')) 41 if (hash !== '') { 42 var element = document.getElementById(hash) 43 if (element) { 44 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 45 var clientTop = document.documentElement.clientTop || document.body.clientTop || 0 46 var offset = element.getBoundingClientRect().top + scrollTop - clientTop 47 // Wait for the browser to finish rendering before scrolling. 48 setTimeout((function() { 49 window.scrollTo(0, offset - 0) 50 }), 0) 51 } 52 } 53 }) 54 </script>
54<link rel="preconnect" href="https://www.googletagmanager.com"/><link rel="dns-prefetch" href="https://www.googletagmanager.com"/><link rel="alternate" type="application/rss+xml" href="/rss.xml"/><link rel="icon" href="/favicon-32x32.png?v=85d698d91c530f0c52565b2484c08753" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><meta name="theme-color" content="#663399"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=85d698d91c530f0c52565b2484c08753"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=85d698d91c530f0c52565b2484c08753"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=85d698d91c530f0c52565b2484c08753"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=85d698d91c530f0c52565b2484c08753"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=85d698d91c530f0c52565b2484c08753"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=85d698d91c530f0c52565b2484c08753"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=85d698d91c530f0c52565b2484c08753"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=85d698d91c530f0c52565b2484c08753"/><title data-react-helmet="true">详解 webpack devtool é
ç½® | D.Z</title><meta data-react-helmet="true" name="description" content="ä»ä¹æ¯ sourceMapï¼ sourceMap æ¯ä¸ç±»ç¨äºæè¿°æä»¶å缩混æ·ååå
容æ å°çæä»¶ï¼å®ä»¥ .map 为åç¼åï¼å
容为ä¸ä¸ª JavaScript 对象ã sourceMap çäº§çæ¯ç±äºç°å¨å端å¼åè¿ç¨ä¸ä¸ºäºèç带宽ï¼é常ä¼å¯¹æºç æä»¶è¿è¡å
54ç¼©åæ··æ·ï¼è¿å°±å¯¼è´æä»¬å¨æµè§å¨ä¸ debugâ¦"/><meta data-react-helmet="true" property="og:title" content="详解 webpack devtool é ç½®"/><meta data-react-helmet="true" property="og:description" content="ä»ä¹æ¯ sourceMapï¼ sourceMap æ¯ä¸ç±»ç¨äºæè¿°æä»¶å缩混æ·ååå 容æ å°çæä»¶ï¼å®ä»¥ .map 为åç¼åï¼å 容为ä¸ä¸ª JavaScript 对象ã sourceMap çäº§çæ¯ç±äºç°å¨å端å¼åè¿ç¨ä¸ä¸ºäºèç带宽ï¼é常ä¼å¯¹æºç æä»¶è¿è¡åç¼©åæ··æ·ï¼è¿å°±å¯¼è´æä»¬å¨æµè§å¨ä¸ debugâ¦"/><meta data-react-helmet="true" property="og:type" content="website"/><link as="script" rel="preload" href="/webpack-runtime-cda720cad315c5813b72.js"/><link as="script" rel="preload" href="/framework-e4c04e60d51e90094a38.js"/><link as="script" rel="preload" href="/app-284eb70e04f24da1a29e.js"/><link as="script" rel="preload" href="/commons-ae986031afb82b61a881.js"/><link as="script" rel="preload" href="/component---src-templates-blog-post-js-222c8e9ba0bf379d037c.js"/><link as="fetch" rel="preload" href="/page-data/webpack-devtool-config/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/2841359383.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="global-wrapper" data-is-root-path="false"><header class="global-header"><a class="header-link-home" href="/">D.Z</a></header><main><article class="blog-post" itemscope="" itemType="http://schema.org/Article"><header><h1 itemProp="headline">详解 webpack devtool é ç½®</h1><p>05-17, 2019<label class="blog-post-module--tags--22imv"><label class="blog-post-module--tag--bowv_">æç¨</label></label></p></header><section itemProp="articleBody"><h1 id="ä»ä¹æ¯-sourcemap" style="position:relative;"><a href="#%E4%BB%80%E4%B9%88%E6%98%AF-sourcemap" aria-label="ä»ä¹æ¯ sourcemap permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ä»ä¹æ¯ sourceMapï¼</h1> 55<p>sourceMap æ¯ä¸ç±»ç¨äºæè¿°æä»¶å缩混æ·ååå 容æ å°çæä»¶ï¼å®ä»¥ .map 为åç¼åï¼å 容为ä¸ä¸ª JavaScript 对象ã</p> 56<p>sourceMap çäº§çæ¯ç±äºç°å¨å端å¼åè¿ç¨ä¸ä¸ºäºèç带宽ï¼é常ä¼å¯¹æºç æä»¶è¿è¡å
56ç¼©åæ··æ·ï¼è¿å°±å¯¼è´æä»¬å¨æµè§å¨ä¸ debug ä»£ç æ¶é¢å¯¹çæ¯åç¼©åæ··æ·åç代ç ãæä»¥æµè§å¨æä¾äºä¸é¡¹ souceMap è½åï¼éè¿ map æä»¶æ¥æè¿°å缩æä»¶ååå§æä»¶é´å å®¹çæ å°ï¼è¿æ ·æä»¬å¨ source 颿¿ä¸å¯ä»¥å¯¹åå§æä»¶è¿è¡æç¹è°è¯ã</p> 57<p>souceMap å¹¶ä¸ä» éäº js æä»¶ï¼css 乿¯æ sourceMapã</p> 58<h1 id="webpack-ä¸ç-sourcemap" style="position:relative;"><a href="#webpack-%E4%B8%AD%E7%9A%84-sourcemap" aria-label="webpack ä¸ç sourcemap permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>webpack ä¸ç sourceMap</h1> 59<p>æä»¬ä»¥ webpack@4 为ä¾ï¼æä»¬å¯ä»¥éè¿ devTool é ç½®æ¥æ§å¶å¦ä½çæ sourceMapãwebpack æä¾äºå¾å¤ç§æ¹å¼ï¼source-mapãcheap-source-map ççãæ»çæ¥è¯´å¯ä»¥æ ¹æ®åè½åç±»æä»¥ä¸å ç§ï¼</p> 60<ol> 61<li>evalï¼æºç 以å符çå½¢å¼è¢« eval(â¦) æ¥è°ç¨ï¼ä¸ä¼çæ sourceMap ä¿¡æ¯ï¼åªä¼éè¿ä¸ä¸ª sourceURL æ¥åå¨åå§æä»¶çä½ç½®ã</li> 62<li>source-mapï¼ä¼çæ sourceMap ä¿¡æ¯ï¼é»è®¤ä¼è¾åºå°ä¸ä¸ª .map æä»¶ä¸ï¼ä¸æºç ä¸ä¼éè¿ sourceMappingURL æ¥æå®å¯¹åº map æä»¶ä½ç½®ã</li> 63<li>cheapï¼çæç sourceMap ä¿¡æ¯ä¸å å«åä¿¡æ¯ã</li> 64<li>moduleï¼çæç sourceMap ä¿¡æ¯è¿å å« loader å¤çååçæ å°ä¿¡æ¯ï¼æ¯å¦æºç æ¯ jsxï¼å¦ææ²¡æä½¿ç¨å« module ç sourceMapï¼ååªè½è§£æå js å½¢å¼ï¼ä½¿ç¨äºå« module çåå¯ä»¥è§£æå jsxã</li> 65<li>inline: map ä¿¡æ¯ä»¥ DataURI çæ¹å¼åæ¾å¨æºç æä»¶ä¸ã 66å ·ä½åç§å¼çæå ææå¯ä»¥åè§åè 1ã</li> 67</ol> 68<h1 id="踩å" style="position:relative;"><a href="#%E8%B8%A9%E5%9D%91" aria-label="踩å permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>踩å</h1> 69<p>使ç¨äº react-hot-loader éè¦ä½¿ç¨ cheap-module-eval-source-map sourceMap çè¡å·æ å°ææ£ç¡®ã</p> 70<p>#åè</p> 71<ol> 72<li>webpack æ¯æçåç§ sourceMap ç±»å</li> 73</ol></section><hr/></article><nav class="blog-post-nav"><ul style="display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;padding:0"><li><a rel="prev" href="/code-check-with-git/">â <!-- -->JavaScriptä»£ç æ£æ¥åä¸gulpãgitçç»å使ç¨</a></li><li><a rel="next" href="/why-postmessage-execute-fail/">postMessage execute fail ä¹è°<!-- --> â</a></li></ul></nav><div id="disqus_thread"></div></main><footer>© <!-- -->2022<!-- -->, Built By <a href="/">dingziqi</a> with<!-- --> <a href="https://www.gatsbyjs.com">Gatsby</a></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div>
vendor: 66 bytes, line 73
73<script async="" src="https://www.googletagmanager.com/gtag/js?id=
73G-JT389EHEGP
vendor: 11 bytes, line 73
73"></script>
73<script> 74 75 76 if(true) { 77 window.dataLayer = window.dataLayer || []; 78 function gtag(){window.dataLayer && window.dataLayer.push(arguments);} 79 gtag('js', new Date()); 80 81 gtag('config', 'G-JT389EHEGP', {"send_page_view":false}); 82 } 83 </script>
83<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/webpack-devtool-config/";/*]]>*/</script>
83<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-3de3dfb85c7bae6d063e.js"],"app":["/app-284eb70e04f24da1a29e.js"],"component---src-pages-404-js":["/component---src-pages-404-js-4f2d6ae760956f9a7a8b.js"],"component---src-pages-index-js":["/component---src-pages-index-js-9a88c00b08cc8b6c293e.js"],"component---src-pages-using-typescript-tsx":["/component---src-pages-using-typescript-tsx-c65262d8108f2de0446f.js"],"component---src-templates-blog-post-js":["/component---src-templates-blog-post-js-222c8e9ba0bf379d037c.js"]};/*]]>*/</script>
83<script src="/polyfill-3de3dfb85c7bae6d063e.js" nomodule=""></script>
83<script src="/component---src-templates-blog-post-js-222c8e9ba0bf379d037c.js" async=""></script>
83<script src="/commons-ae986031afb82b61a881.js" async=""></script>
83<script src="/app-284eb70e04f24da1a29e.js" async=""></script>
83<script src="/framework-e4c04e60d51e90094a38.js" async=""></script>
83<script src="/webpack-runtime-cda720cad315c5813b72.js" async=""></script>
83</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.