npm - cainiaoblog - Versions diffs - 23.2.171 - Mend

cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (401) hide show

package/CNAME +1 -0
package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
package/README.md +8 -0
package/about/index.html +54 -0
package/ads.txt +1 -0
package/app/manual.html +104 -0
package/appConfigs/config +1 -0
package/archives/2018/index.html +48 -0
package/archives/2019/index.html +48 -0
package/archives/2019/page/2/index.html +48 -0
package/archives/2020/index.html +48 -0
package/archives/2021/index.html +48 -0
package/archives/2022/index.html +48 -0
package/archives/2023/index.html +48 -0
package/archives/index.html +48 -0
package/archives/page/2/index.html +48 -0
package/archives/page/3/index.html +48 -0
package/article/10047.html +148 -0
package/article/10164.html +64 -0
package/article/10624.html +436 -0
package/article/10745.html +586 -0
package/article/11674.html +71 -0
package/article/11939.html +72 -0
package/article/12238.html +86 -0
package/article/1230.html +533 -0
package/article/13265.html +69 -0
package/article/13823.html +78 -0
package/article/14125.html +72 -0
package/article/14192.html +561 -0
package/article/14375.html +85 -0
package/article/14744.html +83 -0
package/article/14936.html +451 -0
package/article/1518.html +250 -0
package/article/15428.html +71 -0
package/article/15518.html +288 -0
package/article/15569.html +418 -0
package/article/1566.html +122 -0
package/article/16017.html +156 -0
package/article/16947.html +440 -0
package/article/17096.html +82 -0
package/article/17246.html +89 -0
package/article/17575.html +350 -0
package/article/179.html +757 -0
package/article/18039.html +233 -0
package/article/18071.html +375 -0
package/article/18142.html +71 -0
package/article/19909.html +160 -0
package/article/20014.html +89 -0
package/article/20021.html +389 -0
package/article/20037.html +280 -0
package/article/20056.html +95 -0
package/article/20093.html +404 -0
package/article/2021.html +607 -0
package/article/20459.html +115 -0
package/article/20613.html +263 -0
package/article/20635.html +71 -0
package/article/21317.html +71 -0
package/article/21320.html +90 -0
package/article/21782.html +548 -0
package/article/22230.html +435 -0
package/article/22237.html +347 -0
package/article/22398.html +109 -0
package/article/22422.html +270 -0
package/article/22565.html +300 -0
package/article/23046.html +250 -0
package/article/23083.html +215 -0
package/article/23195.html +297 -0
package/article/23301.html +835 -0
package/article/23589.html +285 -0
package/article/23655.html +338 -0
package/article/23864.html +76 -0
package/article/23914.html +96 -0
package/article/24169.html +135 -0
package/article/24581.html +349 -0
package/article/2475.html +500 -0
package/article/24826.html +77 -0
package/article/24924.html +247 -0
package/article/25164.html +1495 -0
package/article/25318.html +394 -0
package/article/25710.html +1129 -0
package/article/25734.html +83 -0
package/article/26083.html +174 -0
package/article/26147.html +283 -0
package/article/26291.html +110 -0
package/article/26354.html +71 -0
package/article/26624.html +145 -0
package/article/26639.html +298 -0
package/article/26850.html +138 -0
package/article/26940.html +258 -0
package/article/27796.html +190 -0
package/article/27800.html +161 -0
package/article/28963.html +159 -0
package/article/28976.html +247 -0
package/article/29042.html +72 -0
package/article/29596.html +81 -0
package/article/29619.html +183 -0
package/article/29623.html +329 -0
package/article/29829.html +205 -0
package/article/29abbd1c.html +112 -0
package/article/30215.html +178 -0
package/article/30552.html +78 -0
package/article/30818.html +201 -0
package/article/31330.html +364 -0
package/article/3154.html +577 -0
package/article/31695.html +348 -0
package/article/31826.html +71 -0
package/article/31843.html +132 -0
package/article/32280.html +212 -0
package/article/32431.html +74 -0
package/article/32443.html +72 -0
package/article/32732.html +122 -0
package/article/3286.html +251 -0
package/article/32960.html +198 -0
package/article/33713.html +72 -0
package/article/33899.html +615 -0
package/article/34351.html +74 -0
package/article/34372.html +89 -0
package/article/34410.html +74 -0
package/article/34431.html +118 -0
package/article/3447.html +75 -0
package/article/34474.html +142 -0
package/article/34871.html +147 -0
package/article/35397.html +175 -0
package/article/3544.html +199 -0
package/article/35503.html +115 -0
package/article/35624.html +84 -0
package/article/35697.html +384 -0
package/article/35863.html +73 -0
package/article/36037.html +253 -0
package/article/36118.html +71 -0
package/article/3621.html +119 -0
package/article/36251.html +296 -0
package/article/36642.html +352 -0
package/article/37102.html +763 -0
package/article/37336.html +351 -0
package/article/37351.html +89 -0
package/article/3760.html +294 -0
package/article/37749.html +75 -0
package/article/37789.html +83 -0
package/article/38005.html +765 -0
package/article/38009.html +284 -0
package/article/38269.html +194 -0
package/article/38344.html +88 -0
package/article/38359.html +334 -0
package/article/38423.html +379 -0
package/article/38530.html +213 -0
package/article/38743.html +268 -0
package/article/38753.html +204 -0
package/article/38881.html +71 -0
package/article/39087.html +414 -0
package/article/39309.html +84 -0
package/article/39486.html +74 -0
package/article/39637.html +306 -0
package/article/39839.html +72 -0
package/article/39937.html +152 -0
package/article/39970.html +71 -0
package/article/402.html +559 -0
package/article/40698.html +71 -0
package/article/40811.html +71 -0
package/article/40964.html +462 -0
package/article/41011.html +322 -0
package/article/41152.html +78 -0
package/article/41696.html +71 -0
package/article/41717.html +281 -0
package/article/41777.html +149 -0
package/article/419.html +985 -0
package/article/4233.html +136 -0
package/article/4292.html +86 -0
package/article/43302.html +96 -0
package/article/43397.html +106 -0
package/article/43724.html +281 -0
package/article/43999.html +224 -0
package/article/44426.html +77 -0
package/article/44964.html +137 -0
package/article/45004.html +123 -0
package/article/4510.html +83 -0
package/article/45156.html +320 -0
package/article/45157.html +52 -0
package/article/45267.html +87 -0
package/article/45641.html +207 -0
package/article/45960.html +75 -0
package/article/46100.html +1262 -0
package/article/46366.html +74 -0
package/article/46771.html +96 -0
package/article/46911.html +517 -0
package/article/46948.html +137 -0
package/article/46ee4850.html +349 -0
package/article/47019.html +84 -0
package/article/47532.html +94 -0
package/article/4783.html +429 -0
package/article/47972.html +72 -0
package/article/48216.html +127 -0
package/article/48252.html +185 -0
package/article/48520.html +74 -0
package/article/48722.html +75 -0
package/article/48807.html +99 -0
package/article/49126.html +323 -0
package/article/50001.html +88 -0
package/article/50058.html +151 -0
package/article/50343.html +410 -0
package/article/50510.html +82 -0
package/article/51082.html +98 -0
package/article/51677.html +111 -0
package/article/5204.html +1085 -0
package/article/52500.html +538 -0
package/article/52689.html +259 -0
package/article/52877.html +569 -0
package/article/53125.html +191 -0
package/article/53428.html +251 -0
package/article/53524.html +74 -0
package/article/53698.html +322 -0
package/article/53803e6.html +93 -0
package/article/53924.html +291 -0
package/article/53962.html +253 -0
package/article/54006.html +71 -0
package/article/54018.html +88 -0
package/article/54161.html +83 -0
package/article/54178.html +69 -0
package/article/54258.html +327 -0
package/article/54295.html +214 -0
package/article/54313.html +1976 -0
package/article/54351.html +90 -0
package/article/54604.html +80 -0
package/article/54632.html +71 -0
package/article/54912.html +756 -0
package/article/54918.html +129 -0
package/article/55119.html +136 -0
package/article/55756.html +118 -0
package/article/55769.html +136 -0
package/article/55870.html +161 -0
package/article/56139.html +92 -0
package/article/56557.html +69 -0
package/article/56604.html +69 -0
package/article/56816.html +266 -0
package/article/56926.html +153 -0
package/article/57747.html +409 -0
package/article/57965.html +475 -0
package/article/58816.html +78 -0
package/article/59059.html +435 -0
package/article/59095.html +350 -0
package/article/59349.html +244 -0
package/article/59402.html +216 -0
package/article/59448.html +55 -0
package/article/59870.html +94 -0
package/article/59877.html +208 -0
package/article/5dbb6f41.html +86 -0
package/article/6008.html +75 -0
package/article/60327.html +126 -0
package/article/6035.html +76 -0
package/article/60428.html +71 -0
package/article/60544.html +128 -0
package/article/61319.html +95 -0
package/article/61367.html +93 -0
package/article/624d1918.html +292 -0
package/article/62543.html +71 -0
package/article/62887.html +169 -0
package/article/63074.html +120 -0
package/article/63266.html +311 -0
package/article/63351.html +74 -0
package/article/63542.html +104 -0
package/article/63824.html +275 -0
package/article/64051.html +653 -0
package/article/64189b69.html +72 -0
package/article/64354.html +75 -0
package/article/64869.html +79 -0
package/article/64923.html +596 -0
package/article/65128.html +95 -0
package/article/65295.html +79 -0
package/article/6888.html +75 -0
package/article/7065.html +84 -0
package/article/7455.html +85 -0
package/article/7a3ef8f.html +315 -0
package/article/8140.html +188 -0
package/article/8190.html +85 -0
package/article/8225.html +78 -0
package/article/84c9ccd6.html +159 -0
package/article/8f9a9ae3.html +82 -0
package/article/9174.html +73 -0
package/article/9738.html +294 -0
package/article/a4145266.html +71 -0
package/article/bedea419.html +72 -0
package/article/bf7e7421.html +78 -0
package/article/c1867fbf.html +103 -0
package/article/c5576490.html +70 -0
package/article/dcb0db28.html +76 -0
package/article/fc3b727a.html +79 -0
package/atom.xml +445 -0
package/baidusitemap.xml +1079 -0
package/blocks/dns.txt +264 -0
package/blocks/filter.txt +1070 -0
package/blocks/script.js +42 -0
package/categories/CDN/index.html +48 -0
package/categories/IDE/index.html +48 -0
package/categories/git/index.html +48 -0
package/categories/hexo/index.html +48 -0
package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
package/categories//345/210/206/344/272/253/index.html +48 -0
package/categories//345/211/215/347/253/257/index.html +48 -0
package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
package/categories//345/215/232/345/256/242/index.html +48 -0
package/categories//345/267/245/345/205/267/index.html +48 -0
package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
package/categories//346/255/243/345/210/231/index.html +48 -0
package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
package/categories//347/256/227/346/263/225/index.html +48 -0
package/categories//350/265/204/350/256/257/index.html +48 -0
package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
package/cdn/css/font-awesome.min.css +4 -0
package/cdn/css/grids-responsive-min.css +7 -0
package/cdn/css/normalize.css +349 -0
package/cdn/css/pure-min.css +11 -0
package/cdn/fonts/fontawesome-webfont.eot +0 -0
package/cdn/fonts/fontawesome-webfont.svg +2671 -0
package/cdn/fonts/fontawesome-webfont.ttf +0 -0
package/cdn/fonts/fontawesome-webfont.woff +0 -0
package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
package/cdn/js/Valine.min.js +17 -0
package/cdn/js/canvas-nest.js +1 -0
package/cdn/js/clipboard.min.js +7 -0
package/cdn/js/crypto-js.js +25 -0
package/cdn/js/jquery.min.js +2 -0
package/css/default.css +1144 -0
package/css/donate.css +338 -0
package/css/hbe.style.css +749 -0
package/css/style.css +2095 -0
package/donate/index.html +39 -0
package/google917dcf72f6e5c7f5.html +1 -0
package/guestbook/index.html +68 -0
package/hosts/ads.txt +149 -0
package/hosts/flash.txt +9 -0
package/hosts/github.txt +6 -0
package/hosts/google.txt +16936 -0
package/hosts/winrar.txt +2 -0
package/img/alipay.svg +46 -0
package/img/bitcoin.svg +135 -0
package/img/blog.ico +0 -0
package/img/blog.png +0 -0
package/img/gaba.png +0 -0
package/img/github.svg +1 -0
package/img/like.svg +1 -0
package/img/mp-mini.jpg +0 -0
package/img/mp.png +0 -0
package/img/paypal.svg +63 -0
package/img/upy_logo.svg +59 -0
package/img/wechat.svg +49 -0
package/index.html +48 -0
package/jd_root.txt +1 -0
package/js/codeblock-resizer.js +51 -0
package/js/dark.js +12 -0
package/js/donate.js +87 -0
package/js/fixedPage.js +106 -0
package/js/gitment.browser.js +3751 -0
package/js/search.js +86 -0
package/js/share.js +60 -0
package/js/smartresize.js +32 -0
package/js/totop.js +12 -0
package/kankan/index.html +77 -0
package/lib/hbe.js +293 -0
package/package.json +25 -0
package/page/10/index.html +49 -0
package/page/11/index.html +59 -0
package/page/12/index.html +67 -0
package/page/13/index.html +63 -0
package/page/14/index.html +66 -0
package/page/15/index.html +60 -0
package/page/16/index.html +60 -0
package/page/17/index.html +62 -0
package/page/18/index.html +61 -0
package/page/19/index.html +58 -0
package/page/2/index.html +48 -0
package/page/20/index.html +57 -0
package/page/21/index.html +61 -0
package/page/22/index.html +55 -0
package/page/23/index.html +64 -0
package/page/24/index.html +60 -0
package/page/25/index.html +58 -0
package/page/26/index.html +48 -0
package/page/27/index.html +58 -0
package/page/3/index.html +48 -0
package/page/4/index.html +48 -0
package/page/5/index.html +51 -0
package/page/6/index.html +51 -0
package/page/7/index.html +51 -0
package/page/8/index.html +53 -0
package/page/9/index.html +48 -0
package/randomcall/README.html +1 -0
package/randomcall/lucker.html +290 -0
package/randomcall/lucky.png +0 -0
package/robots.txt +22 -0
package/search.xml +6740 -0
package/sitemap.xml +2669 -0
package/tags//345/216/237/345/210/233/index.html +48 -0
package/tags//345/250/261/344/271/220/index.html +48 -0
package/tags//346/211/213/345/206/231/index.html +48 -0
package/tags//347/226/253/346/203/205/index.html +48 -0
package/tags//350/275/254/350/275/275/index.html +48 -0
package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
package/v.html +90 -0

package/article/25164.html ADDED Viewed

@@ -0,0 +1,1495 @@
+<!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>一步步从零开始用 webpack 搭建一个大型项目 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
+  var bp = document.createElement('script');
+  var curProtocol = window.location.protocol.split(':')[0];
+  if (curProtocol === 'https'){
+    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
+  }
+  else{
+    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
+  }
+  var s = document.getElementsByTagName("script")[0];
+  s.parentNode.insertBefore(bp, s);
+})();
+</script><script>(function(){
+  var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
+  document.write('<script src="' + src + '" id="sozz"><\/script>');
+})();
+</script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
+</script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
+</script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">一步步从零开始用 webpack 搭建一个大型项目</h1><div class="post-meta"><span class="date">2019-12-23</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 8k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 40</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/25164.html#vcomment"><span class="waline-comment-count" data-path="/article/25164.html"></span><span> 条评论</span></a><div class="post-content"><blockquote>
+<p>作者：前端技匠 公号 &#x2F; 罗学 （本文来自作者投稿）<br><code>原文地址：https://mp.weixin.qq.com/s/a0QFhcbwkhXStBfMOe7exA</code><br>很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教程是不是符合自己的项目？等一系列问题！本文从最基础配置一步步到一个完善的大型项目的过程。让你对 webpack 再也不会畏惧，让它真正成为你的得力助手！</p>
+</blockquote>
+<span id="more"></span>
+<p>本文从下面几个课题来实现</p>
+<ul>
+<li>课题 1：初探 webpack？探究 webpack 打包原理</li>
+<li>课题 2：搭建开发环境跟生产环境</li>
+<li>课题 3：基础配置之loader</li>
+<li>课时 4：webpack性能优化</li>
+<li>课时 5：手写loader实现可选链</li>
+<li>课时 6：webpack编译优化</li>
+<li>课时 7：多页面配置</li>
+<li>课时 8：手写一个webpack插件</li>
+<li>课时 9：构建 ssr</li>
+</ul>
+<h3 id="项目地址"><a href="#项目地址" class="headerlink" title="项目地址"></a>项目地址</h3><p><a target="_blank" rel="noopener" href="https://github.com/luoxue-victor/learn_webpack/">https://github.com/luoxue-victor/learn_webpack/</a></p>
+<h3 id="脚手架"><a href="#脚手架" class="headerlink" title="脚手架"></a>脚手架</h3><pre><code>npm i -g webpack-box
+</code></pre>
+<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><pre><code>webpack-box dev   # 开发环境
+webpack-box build # 生产环境
+webpack-box dll   # 编译差分包
+webpack-box dev index   # 指定页面编译（多页面）
+webpack-box build index # 指定页面编译（多页面）
+webpack-box build index --report # 开启打包分析
+webpack-box build:ssr  # 编译ssr
+webpack-box ssr:server # 在 server 端运行
+</code></pre>
+<p>在 package.json 中使用</p>
+<pre><code>&#123;
+&quot;scripts&quot;: &#123;
+&quot;dev&quot;: &quot;webpack-box dev&quot;,
+&quot;build&quot;: &quot;webpack-box build&quot;,
+&quot;dll&quot;: &quot;webpack-box dll&quot;,
+&quot;build:ssr&quot;: &quot;webpack-box build:ssr&quot;,
+&quot;ssr:server&quot;: &quot;webpack-box ssr:server&quot;
+  &#125;
+&#125;
+</code></pre>
+<p>使用</p>
+<pre><code>npm run build --report # 开启打包分析
+</code></pre>
+<p>扩展配置</p>
+<p>box.config.js</p>
+<pre><code>module.exports = function (config) &#123;
+/**
+   * @param &#123;object&#125; dll 开启差分包
+   * @param &#123;object&#125; pages 多页面配置 通过 box run/build index 来使用
+   * @param &#123;function&#125; chainWebpack
+   * @param &#123;string&#125; entry 入口
+   * @param &#123;string&#125; output 出口
+   * @param &#123;string&#125; publicPath
+   * @param &#123;string&#125; port
+   */
+return &#123;
+entry: &#39;src/main.js&#39;,
+output: &#39;dist&#39;,
+publicPath: &#39;/common/&#39;,
+port: 8888,
+dll: &#123;
+venders: [&#39;vue&#39;, &#39;react&#39;]
+    &#125;,
+pages: &#123;
+index: &#123;
+entry: &#39;src/main.js&#39;,
+template: &#39;public/index.html&#39;,
+filename: &#39;index.html&#39;,
+      &#125;,
+index2: &#123;
+entry: &#39;src/main.js&#39;,
+template: &#39;public/index2.html&#39;,
+filename: &#39;index2.html&#39;,
+      &#125;
+    &#125;,
+    chainWebpack(config) &#123;
+    &#125;
+  &#125;
+&#125;
+</code></pre>
+<hr>
+<h2 id="课题-1-初探-webpack？探究-webpack-打包原理"><a href="#课题-1-初探-webpack？探究-webpack-打包原理" class="headerlink" title="课题 1:初探 webpack？探究 webpack 打包原理"></a>课题 1:初探 webpack？探究 webpack 打包原理</h2><p>想要学好 <code>webpack</code>，我们首先要了解 <code>webpack</code> 的机制，我们先从js加载css开始学习。</p>
+<p>我们从下面这个小练习开始走进 <code>webpack</code> 吧</p>
+<p>在 <code>index.js</code> 中引入 <code>index.css</code></p>
+<pre><code>const css = require(&#39;./index.css&#39;)
+console.log(css)
+</code></pre>
+<p>css 文件并不能被 js 识别，webpack 也不例外，上述的写法不出意外会报错</p>
+<p>我们如何让 webpack 识别 css 呢，答案就在 webpack 给我们提供了 loader 机制，可以让我们通过loader 将任意的文件转成 webpack 可以识别的文件</p>
+<p>本章主要讲解</p>
+<ol>
+<li>webpack 基础配置</li>
+<li>解析 bundle 如何加载模块</li>
+<li>动态 import 加载原理</li>
+<li>使用 webpack-chain 重写配置</li>
+<li>课时 1 小结</li>
+</ol>
+<h3 id="webpack-基础配置"><a href="#webpack-基础配置" class="headerlink" title="webpack 基础配置"></a>webpack 基础配置</h3><h4 id="需要的依赖包"><a href="#需要的依赖包" class="headerlink" title="需要的依赖包"></a>需要的依赖包</h4><p>package.json</p>
+<pre><code>&#123;
+&quot;scripts&quot;: &#123;
+&quot;dev&quot;: &quot;cross-env NODE_ENV=development webpack&quot;, // 开发环境
+&quot;build&quot;: &quot;cross-env NODE_ENV=production webpack&quot; // 生产环境
+  &#125;,
+&quot;dependencies&quot;: &#123;
+&quot;cross-env&quot;: &quot;^6.0.3&quot;, // 兼容各种环境
+&quot;css-loader&quot;: &quot;^3.2.0&quot;,
+&quot;rimraf&quot;: &quot;^3.0.0&quot;, // 删除文件
+&quot;webpack&quot;: &quot;^4.41.2&quot;
+  &#125;,
+&quot;devDependencies&quot;: &#123;
+&quot;webpack-cli&quot;: &quot;^3.3.10&quot;
+  &#125;
+&#125;
+</code></pre>
+<h4 id="webpack-基础配置-1"><a href="#webpack-基础配置-1" class="headerlink" title="webpack 基础配置"></a>webpack 基础配置</h4><p>webpack.config.js</p>
+<pre><code>const path = require(&#39;path&#39;);
+const rimraf = require(&#39;rimraf&#39;);
+// 删除 dist 目录
+rimraf.sync(&#39;dist&#39;);
+// webpack 配置
+module.exports = &#123;
+entry: &#39;./src/index&#39;,
+mode: process.env.NODE_ENV,
+output: &#123;
+filename: &#39;bundle.js&#39;,
+path: path.resolve(__dirname, &#39;dist&#39;)
+  &#125;
+&#125;;
+</code></pre>
+<h4 id="css-引入到-js"><a href="#css-引入到-js" class="headerlink" title="css 引入到 js"></a>css 引入到 js</h4><p>src&#x2F;index.js</p>
+<pre><code>const css = require(&#39;css-loader!./index.css&#39;);
+const a = 100;
+console.log(a, css);
+</code></pre>
+<h4 id="测试-css"><a href="#测试-css" class="headerlink" title="测试 css"></a>测试 css</h4><p>src&#x2F;index.css</p>
+<pre><code>body &#123;
+width: 100%;
+height: 100vh;
+background-color: orange;
+&#125;
+</code></pre>
+<h3 id="解析-bundle-如何加载模块"><a href="#解析-bundle-如何加载模块" class="headerlink" title="解析 bundle 如何加载模块"></a>解析 bundle 如何加载模块</h3><p>我删掉了一些注释跟一些干扰内容，这样看起来会更清晰一点</p>
+<ul>
+<li><code>bundle</code> 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。</li>
+<li><code>webpack</code> 将所有模块打包成了 <code>bundle</code> 的依赖，通过一个对象注入</li>
+<li><code>0 模块</code> 就是入口</li>
+<li><code>webpack</code> 通过 <code>__webpack_require__</code> 引入模块</li>
+<li><code>__webpack_require__</code> 就是我们使用的 <code>require</code>，被 <code>webpack</code> 封装了一层</li>
+</ul>
+<p>dist&#x2F;bundle.js</p>
+<pre><code>(function(modules) &#123;
+function__webpack_require__(moduleId) &#123;
+if (installedModules[moduleId]) &#123;
+return installedModules[moduleId].exports;
+    &#125;
+varmodule = (installedModules[moduleId] = &#123;
+i: moduleId,
+l: false,
+exports: &#123;&#125;
+    &#125;);
+    modules[moduleId].call(
+module.exports,
+module,
+module.exports,
+      __webpack_require__
+    );
+module.l = true;
+returnmodule.exports;
+  &#125;
+return __webpack_require__((__webpack_require__.s = 0));
+&#125;)(&#123;
+&#39;./src/index.js&#39;: function(module, exports, __webpack_require__) &#123;
+eval(`
+      const css = __webpack_require__(&quot;./src/style/index.css&quot;)
+      const a = 100;
+      console.log(a, css)
+    `);
+  &#125;,
+&#39;./src/style/index.css&#39;: function(module, exports, __webpack_require__) &#123;
+eval(`
+      exports = module.exports = __webpack_require__(&quot;./node_modules/css-loader/dist/runtime/api.js&quot;)(false);
+      exports.push([module.i, &quot;body &#123;
+        width: 100%;
+        height: 100vh;
+        background-color: orange;
+      &#125;&quot;, &quot;&quot;]);
+    `);
+  &#125;,
+0: function(module, exports, __webpack_require__) &#123;
+module.exports = __webpack_require__(&#39;./src/index.js&#39;);
+  &#125;
+&#125;);
+</code></pre>
+<h3 id="动态-import-加载原理"><a href="#动态-import-加载原理" class="headerlink" title="动态 import 加载原理"></a>动态 import 加载原理</h3><p>如果我们把 index.js 的 require 改成 import 会发生什么？</p>
+<p>我们知道 <code>import</code> 跟 <code>require</code> 的区别是，<code>import</code> 是动态加载只有在用到的时候才会去加载，而 <code>require</code> 只要声明了就会加载，<code>webpack</code> 遇到了 <code>require</code> 就会把它当成一个模块加载到 <code>bundle</code> 的依赖里</p>
+<p>那么问题来了，如果我们使用了 import 去引用一个模块，它是如何加载的呢？</p>
+<h4 id="require-改成-import"><a href="#require-改成-import" class="headerlink" title="require 改成 import()"></a>require 改成 import()</h4><p>src&#x2F;index.js</p>
+<pre><code>// const css = require(&#39;css-loader!./index.css&#39;);
+const css = import(&#39;css-loader!./index.css&#39;);
+const a = 100;
+console.log(a, css);
+</code></pre>
+<h4 id="动态加载打包结果"><a href="#动态加载打包结果" class="headerlink" title="动态加载打包结果"></a>动态加载打包结果</h4><p>除了正常的 <code>bundle</code> 之外，我们还可以看见一个 <code>0.boundle.js</code></p>
+<p><code>0.boundle.js</code> 就是我们的动态加载的 <code>index.css</code> 模块</p>
+<pre><code>|-- bundle.js
+|-- 0.boundle.js
+</code></pre>
+<h4 id="动态模块"><a href="#动态模块" class="headerlink" title="动态模块"></a>动态模块</h4><p>0.boundle.js</p>
+<p>这个文件就是把我们 <code>import</code> 的模块放进了一个单独的 <code>js</code> 文件中</p>
+<pre><code>(window[&#39;webpackJsonp&#39;] = window[&#39;webpackJsonp&#39;] || []).push([
+  [0],
+  &#123;
+&#39;./node_modules/css-loader/dist/runtime/api.js&#39;: function(
+      module,
+      exports,
+      __webpack_require__
+) &#123;
+      &#39;use strict&#39;;
+eval(`
+        ...
+      `);
+    &#125;,
+&#39;./src/style/index.css&#39;: function(module, exports, __webpack_require__) &#123;
+eval(`
+        exports = module.exports = __webpack_require__(&quot;./node_modules/css-loader/dist/runtime/api.js&quot;)(false));
+        exports.push([module.i, \`body &#123;
+          width: 100%;
+          height: 100vh;
+          background-color: orange;
+        &#125;,&quot;\`]
+      `);
+    &#125;
+  &#125;
+]);
+</code></pre>
+<h4 id="动态模块加载逻辑"><a href="#动态模块加载逻辑" class="headerlink" title="动态模块加载逻辑"></a>动态模块加载逻辑</h4><p>我们再看下 dist&#x2F;bundle.js</p>
+<p>方便理解，我把大部分代码和注释都删掉了</p>
+<p>原理很简单，就是利用的 jsonp 的实现原理加载模块，只是在这里并不是从 server 拿数据而是从其他模块中</p>
+<ol>
+<li><p>调用模块时会在 <code>window</code> 上注册一个 <code>webpackJsonp</code> 数组，window[‘webpackJsonp’] &#x3D; window[‘webpackJsonp’] || []</p>
+</li>
+<li><p>当我们 <code>import</code>时，<code>webpack</code> 会调用 <code>__webpack_require__.e(0)</code> 方法，也就是 <code>requireEnsure</code></p>
+</li>
+<li><p><code>webpack</code> 会动态创建一个 <code>script</code> 标签去加载这个模块，加载成功后会将该模块注入到 <code>webpackJsonp</code> 中</p>
+</li>
+<li><p><code>webpackJsonp.push</code> 会调用 <code>webpackJsonpCallback</code> 拿到模块</p>
+</li>
+<li><p>模块加载完（then）再使用 <code>__webpack_require__</code> 获取模块</p>
+<p> (function(modules) {<br> functionwebpackJsonpCallback(data) {<br> var chunkIds &#x3D; data[0];<br> var moreModules &#x3D; data[1];<br> var moduleId,<br>   chunkId,<br>   i &#x3D; 0,<br>   resolves &#x3D; [];<br> for (; i &lt; chunkIds.length; i++) {<br>   chunkId &#x3D; chunkIds[i];<br> if (<br> Object.prototype.hasOwnProperty.call(installedChunks, chunkId) &amp;&amp;<br>     installedChunks[chunkId]<br>   ) {<br>     resolves.push(installedChunks[chunkId][0]);<br>   }<br> &#x2F;&#x2F; 模块安装完<br>   installedChunks[chunkId] &#x3D; 0;<br> }<br> for (moduleId in moreModules) {<br> if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {<br>     modules[moduleId] &#x3D; moreModules[moduleId];<br>   }<br> }<br> if (parentJsonpFunction) parentJsonpFunction(data);<br> while (resolves.length) {<br> &#x2F;&#x2F; 执行所有 promise 的 resolve 函数<br>   resolves.shift()();<br> }<br>   }</p>
+<p> functionjsonpScriptSrc(chunkId) {<br> return <strong>webpack_require</strong>.p + ‘’ + ({}[chunkId] || chunkId) + ‘.bundle.js’;<br>   }</p>
+<p> function__webpack_require__(moduleId) {<br> &#x2F;&#x2F; …<br>   }</p>
+<p>   <strong>webpack_require</strong>.e &#x3D; functionrequireEnsure(chunkId) {<br> var promises &#x3D; [];<br> &#x2F;&#x2F; …<br> var script &#x3D; document.createElement(‘script’);<br> var onScriptComplete;<br> script.charset &#x3D; ‘utf-8’;<br> script.timeout &#x3D; 120;<br> script.src &#x3D; jsonpScriptSrc(chunkId);<br><br> onScriptComplete &#x3D; function(event) {<br> &#x2F;&#x2F; 处理异常，消除副作用<br> &#x2F;&#x2F; …<br> };<br> var timeout &#x3D; setTimeout(function() {<br>   onScriptComplete({ type: ‘timeout’, target: script });<br> }, 120000);<br> script.onerror &#x3D; script.onload &#x3D; onScriptComplete;<br> document.head.appendChild(script);<br> &#x2F;&#x2F; …<br> &#x2F;&#x2F; 动态加载模块<br> returnPromise.all(promises);<br>   };</p>
+<p> var jsonpArray &#x3D; (window[‘webpackJsonp’] &#x3D; window[‘webpackJsonp’] || []);<br> &#x2F;&#x2F; 重写数组 push 方法<br>   jsonpArray.push &#x3D; webpackJsonpCallback;<br>   jsonpArray &#x3D; jsonpArray.slice();<br> for (var i &#x3D; 0; i &lt; jsonpArray.length; i++)<br> webpackJsonpCallback(jsonpArray[i]);<br> return <strong>webpack_require</strong>((<strong>webpack_require</strong>.s &#x3D; 0));<br> })({<br> ‘.&#x2F;src&#x2F;index.js’: function(module, exports, <strong>webpack_require</strong>) {<br> eval(<code>     const css = __webpack_require__.e(0).then(__webpack_require__.t.bind(null, &quot;./src/style/index.css&quot;, 7))      const a = 100;      console.log(a, css)   </code>);<br>   },<br> 0: function(module, exports, <strong>webpack_require</strong>) {<br> eval(<code>module.exports = __webpack_require__(&quot;./src/index.js&quot;);</code>);<br>   }<br> });</p>
+</li>
+</ol>
+<h3 id="使用-webpack-chain-重写配置"><a href="#使用-webpack-chain-重写配置" class="headerlink" title="使用 webpack-chain 重写配置"></a>使用 webpack-chain 重写配置</h3><p>我们用 webpack-chain 来写 webpack 的配置，原因是 webpack-chain 的方式更加灵活</p>
+<p>官方解释</p>
+<blockquote>
+<p><code>webpack-chain</code> 尝试通过提供可链式或顺流式的 <code>API</code> 创建和修改 <code>webpack</code> 配置。<code>API</code> 的 <code>Key</code> 部分可以由用户指定的名称引用，这有助于跨项目修改配置方式的标准化。</p>
+</blockquote>
+<pre><code>const path = require(&#39;path&#39;);
+const rimraf = require(&#39;rimraf&#39;);
+const Config = require(&#39;webpack-chain&#39;);
+const config = new Config();
+const resolve = src =&gt; &#123;
+return path.join(process.cwd(), src);
+&#125;;
+// 删除 dist 目录
+rimraf.sync(&#39;dist&#39;);
+config
+// 入口
+  .entry(&#39;src/index&#39;)
+  .add(resolve(&#39;src/index.js&#39;))
+  .end()
+// 模式
+// .mode(process.env.NODE_ENV) 等价下面
+  .set(&#39;mode&#39;, process.env.NODE_ENV)
+// 出口
+  .output.path(resolve(&#39;dist&#39;))
+  .filename(&#39;[name].bundle.js&#39;);
+config.module
+  .rule(&#39;css&#39;)
+  .test(/\.css$/)
+  .use(&#39;css&#39;)
+  .loader(&#39;css-loader&#39;);
+module.exports = config.toConfig();
+</code></pre>
+<h3 id="课时-1-小结"><a href="#课时-1-小结" class="headerlink" title="课时 1 小结"></a>课时 1 小结</h3><p>至此课时 1 已经结束了，我们主要做了以下事情</p>
+<ol>
+<li>webpack 基础配置</li>
+<li>将 css 通过 css-loader 打包进 js 中</li>
+<li>解析 bundle 如何加载模块的</li>
+<li>webpack 如何实现的动态加载模块</li>
+</ol>
+<p>学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如今大前端如此迅猛的发展。</p>
+<hr>
+<h2 id="课题-2：搭建开发环境跟生产环境"><a href="#课题-2：搭建开发环境跟生产环境" class="headerlink" title="课题 2：搭建开发环境跟生产环境"></a>课题 2：搭建开发环境跟生产环境</h2><p>本章提要：</p>
+<ul>
+<li>目录</li>
+<li>实现可插拔配置</li>
+<li>构建生产环境</li>
+<li>构建开发环境（devServer）</li>
+<li>提取 css</li>
+<li>自动生成 html</li>
+<li>项目测试</li>
+</ul>
+<h3 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h3><pre><code>│── build
+│   │── base.js                 // 公共部分
+│   │── build.js
+│   └── dev.js
+│── config
+│   │── base.js                 // 基础配置
+│   │── css.js                  // css 配置
+│   │── HtmlWebpackPlugin.js    // html 配置
+│   └── MiniCssExtractPlugin.js // 提取css
+│── public                      // 公共资源
+│   └── index.html              // html 模版
+└── src                         // 开发目录
+    │── style
+    │ └── index.css
+    └── main.js                // 主入口
+</code></pre>
+<h3 id="实现可插拔配置"><a href="#实现可插拔配置" class="headerlink" title="实现可插拔配置"></a>实现可插拔配置</h3><p>package.json</p>
+<pre><code>&#123;
+&quot;scripts&quot;: &#123;
+&quot;dev&quot;: &quot;cross-env NODE_ENV=development node build/dev.js&quot;,
+&quot;build&quot;: &quot;cross-env NODE_ENV=production node build/build.js&quot;
+  &#125;,
+&quot;dependencies&quot;: &#123;
+&quot;cross-env&quot;: &quot;^6.0.3&quot;,
+&quot;css-loader&quot;: &quot;^3.2.0&quot;,
+&quot;cssnano&quot;: &quot;^4.1.10&quot;,
+&quot;ora&quot;: &quot;^4.0.3&quot;,
+&quot;rimraf&quot;: &quot;^3.0.0&quot;,
+&quot;webpack&quot;: &quot;^4.41.2&quot;
+  &#125;,
+&quot;devDependencies&quot;: &#123;
+&quot;extract-text-webpack-plugin&quot;: &quot;^3.0.2&quot;,
+&quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
+&quot;mini-css-extract-plugin&quot;: &quot;^0.8.0&quot;,
+&quot;vue-cli-plugin-commitlint&quot;: &quot;^1.0.4&quot;,
+&quot;webpack-chain&quot;: &quot;^6.0.0&quot;,
+&quot;webpack-cli&quot;: &quot;^3.3.10&quot;,
+&quot;webpack-dev-server&quot;: &quot;^3.9.0&quot;
+  &#125;
+&#125;
+</code></pre>
+<p>build&#x2F;base.js</p>
+<pre><code>const &#123; findSync &#125; = require(&#39;../lib&#39;);
+const Config = require(&#39;webpack-chain&#39;);
+const config = new Config();
+const files = findSync(&#39;config&#39;);
+const path = require(&#39;path&#39;);
+const resolve = p =&gt; &#123;
+return path.join(process.cwd(), p);
+&#125;;
+module.exports = () =&gt; &#123;
+const map = newMap();
+  files.map(_ =&gt; &#123;
+const name = _.split(&#39;/&#39;)
+      .pop()
+      .replace(&#39;.js&#39;, &#39;&#39;);
+return map.set(name, require(_)(config, resolve));
+  &#125;);
+  map.forEach(v =&gt; v());
+return config;
+&#125;;
+</code></pre>
+<h3 id="构建生产环境"><a href="#构建生产环境" class="headerlink" title="构建生产环境"></a>构建生产环境</h3><p>build&#x2F;build.js</p>
+<pre><code>const rimraf = require(&#39;rimraf&#39;);
+const ora = require(&#39;ora&#39;);
+const chalk = require(&#39;chalk&#39;);
+const path = require(&#39;path&#39;);
+// 删除 dist 目录
+rimraf.sync(path.join(process.cwd(), &#39;dist&#39;));
+const config = require(&#39;./base&#39;)();
+const webpack = require(&#39;webpack&#39;);
+const spinner = ora(&#39;开始构建项目...&#39;);
+spinner.start();
+webpack(config.toConfig(), function(err, stats) &#123;
+  spinner.stop();
+if (err) throw err;
+  process.stdout.write(
+    stats.toString(&#123;
+colors: true,
+modules: false,
+children: false,
+chunks: false,
+chunkModules: false
+    &#125;) + &#39;\n\n&#39;
+  );
+if (stats.hasErrors()) &#123;
+console.log(chalk.red(&#39;构建失败\n&#39;));
+    process.exit(1);
+  &#125;
+console.log(chalk.cyan(&#39;build完成\n&#39;));
+&#125;);
+</code></pre>
+<h3 id="构建开发环境（devServer）"><a href="#构建开发环境（devServer）" class="headerlink" title="构建开发环境（devServer）"></a>构建开发环境（devServer）</h3><p>build&#x2F;dev.js</p>
+<pre><code>const config = require(&#39;./base&#39;)();
+const webpack = require(&#39;webpack&#39;);
+const chalk = require(&#39;chalk&#39;);
+const WebpackDevServer = require(&#39;webpack-dev-server&#39;);
+const port = 8080;
+const publicPath = &#39;/common/&#39;;
+config.devServer
+  .quiet(true)
+  .hot(true)
+  .https(false)
+  .disableHostCheck(true)
+  .publicPath(publicPath)
+  .clientLogLevel(&#39;none&#39;);
+const compiler = webpack(config.toConfig());
+// 拿到 devServer 参数
+const chainDevServer = compiler.options.devServer;
+const server = new WebpackDevServer(
+  compiler,
+Object.assign(chainDevServer, &#123;&#125;)
+);
+[&#39;SIGINT&#39;, &#39;SIGTERM&#39;].forEach(signal =&gt; &#123;
+  process.on(signal, () =&gt; &#123;
+    server.close(() =&gt; &#123;
+      process.exit(0);
+    &#125;);
+  &#125;);
+&#125;);
+// 监听端口
+server.listen(port);
+newPromise(() =&gt; &#123;
+  compiler.hooks.done.tap(&#39;dev&#39;, stats =&gt; &#123;
+const empty = &#39;    &#39;;
+const common = `App running at:
+    - Local: http://127.0.0.1:$&#123;port&#125;$&#123;publicPath&#125;\n`;
+console.log(chalk.cyan(&#39;\n&#39; + empty + common));
+  &#125;);
+&#125;);
+</code></pre>
+<h3 id="提取-css"><a href="#提取-css" class="headerlink" title="提取 css"></a>提取 css</h3><p>config&#x2F;css.js</p>
+<h4 id="css-提取-loader-配置"><a href="#css-提取-loader-配置" class="headerlink" title="css 提取 loader 配置"></a>css 提取 loader 配置</h4><pre><code>module.exports = (config, resolve) =&gt; &#123;
+return(lang, test) =&gt; &#123;
+const baseRule = config.module.rule(lang).test(test);
+const normalRule = baseRule.oneOf(&#39;normal&#39;);
+    applyLoaders(normalRule);
+functionapplyLoaders(rule) &#123;
+      rule
+        .use(&#39;extract-css-loader&#39;)
+        .loader(require(&#39;mini-css-extract-plugin&#39;).loader)
+        .options(&#123;
+publicPath: &#39;./&#39;
+        &#125;);
+      rule
+        .use(&#39;css-loader&#39;)
+        .loader(&#39;css-loader&#39;)
+        .options(&#123;&#125;);
+    &#125;
+  &#125;;
+&#125;;
+</code></pre>
+<h4 id="css-提取插件-MiniCssExtractPlugin"><a href="#css-提取插件-MiniCssExtractPlugin" class="headerlink" title="css 提取插件 MiniCssExtractPlugin"></a>css 提取插件 MiniCssExtractPlugin</h4><p>config&#x2F;MiniCssExtractPlugin.js</p>
+<pre><code>const MiniCssExtractPlugin = require(&#39;mini-css-extract-plugin&#39;);
+module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config
+      .oneOf(&#39;normal&#39;)
+      .plugin(&#39;mini-css-extract&#39;)
+      .use(MiniCssExtractPlugin);
+  &#125;;
+&#125;;
+</code></pre>
+<h3 id="自动生成-html"><a href="#自动生成-html" class="headerlink" title="自动生成 html"></a>自动生成 html</h3><p>config&#x2F;HtmlWebpackPlugin.js</p>
+<pre><code>const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
+module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config.plugin(&#39;html&#39;).use(HtmlWebpackPlugin, [
+      &#123;
+template: &#39;public/index.html&#39;
+      &#125;
+    ]);
+  &#125;;
+&#125;;
+</code></pre>
+<h3 id="项目测试"><a href="#项目测试" class="headerlink" title="项目测试"></a>项目测试</h3><h4 id="测试-html-模板"><a href="#测试-html-模板" class="headerlink" title="测试 html 模板"></a>测试 html 模板</h4><p>public&#x2F;index.html</p>
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;metacharset=&quot;UTF-8&quot;&gt;
+&lt;title&gt;learn_webpack&lt;/title&gt;
+&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+<h4 id="测试-css-模板"><a href="#测试-css-模板" class="headerlink" title="测试 css 模板"></a>测试 css 模板</h4><p>src&#x2F;style&#x2F;index.css</p>
+<pre><code>.test &#123;
+width: 200px;
+height: 200px;
+color: red;
+background-color: orange;
+&#125;
+</code></pre>
+<h4 id="程序入口"><a href="#程序入口" class="headerlink" title="程序入口"></a>程序入口</h4><p>src&#x2F;main.js</p>
+<pre><code>require(&#39;./style/index.css&#39;);
+const h2 = document.createElement(&#39;h2&#39;);
+h2.className = &#39;test&#39;;
+h2.innerText = &#39;test&#39;;
+document.body.append(h2);
+</code></pre>
+<hr>
+<h2 id="课题-3：基础配置之loader"><a href="#课题-3：基础配置之loader" class="headerlink" title="课题 3：基础配置之loader"></a>课题 3：基础配置之loader</h2><p>本章提要：</p>
+<ul>
+<li>配置 babel</li>
+<li>使用 babel 配置 ts</li>
+<li>ts 静态类型检查</li>
+<li>友好错误提示插件</li>
+<li>配置样式，style，css、less、sass、postcss 等</li>
+<li>postcss 配置</li>
+<li>编译前后 css 对比</li>
+<li>配置 autoprefixer</li>
+<li>开启 source map</li>
+</ul>
+<h3 id="目录-1"><a href="#目录-1" class="headerlink" title="目录"></a>目录</h3><p>增加以下文件</p>
+<pre><code>│──── config                // 配置目录
+│   │── babelLoader.js      // babel-loader 配置
+│   │── ForkTsChecker.js    // ts 静态检查
+│   │── FriendlyErrorsWebpackPlugin.js // 友好错误提示
+│   └── style
+│──── src                   // 开发目录
+│   │── style
+│   │  │── app.css
+│   │  │── index.less       // 测试 less
+│   │  │── index.scss       // 测试 sass
+│   │  └── index.postcss    // 测试 postcss
+│   └── ts
+│     └── index.ts          // 测试 ts
+│── babel.js
+│── postcss.config.js       // postcss 配置
+│── tsconfig.json           // ts 配置
+└──── dist                  // 打包后的目录
+   │── app.bundle.js
+   │── app.css
+   └── index.html
+</code></pre>
+<h3 id="配置-babel"><a href="#配置-babel" class="headerlink" title="配置 babel"></a>配置 babel</h3><p>config&#x2F;babelLoader.js</p>
+<pre><code>module.exports = (config, resolve) =&gt; &#123;
+const baseRule = config.module.rule(&#39;js&#39;).test(/.js│.tsx?$/);
+const babelPath = resolve(&#39;babel.js&#39;);
+const babelConf = require(babelPath);
+const version = require(resolve(&#39;node_modules/@babel/core/package.json&#39;))
+    .version;
+return() =&gt; &#123;
+    baseRule
+      .use(&#39;babel&#39;)
+      .loader(require.resolve(&#39;babel-loader&#39;))
+      .options(babelConf(&#123; version &#125;));
+  &#125;;
+&#125;;
+</code></pre>
+<h3 id="使用-babel-配置-ts"><a href="#使用-babel-配置-ts" class="headerlink" title="使用 babel 配置 ts"></a>使用 babel 配置 ts</h3><p>这里我们使用 <code>babel</code> 插件 <code>@babel/preset-typescript</code> 将 <code>ts</code> 转成 <code>js，并使用</code> <code>ForkTsCheckerWebpackPlugin</code>、<code>ForkTsCheckerNotifierWebpackPlugin</code> 插件进行错误提示。</p>
+<p>babel.js</p>
+<pre><code>module.exports = function(api) &#123;
+return &#123;
+presets: [
+      [
+&#39;@babel/preset-env&#39;,
+        &#123;
+targets: &#123;
+chrome: 59,
+edge: 13,
+firefox: 50,
+safari: 8
+          &#125;
+        &#125;
+      ],
+      [
+&#39;@babel/preset-typescript&#39;,
+        &#123;
+allExtensions: true
+        &#125;
+      ]
+    ],
+plugins: [
+&#39;@babel/plugin-transform-typescript&#39;,
+&#39;transform-class-properties&#39;,
+&#39;@babel/proposal-object-rest-spread&#39;
+    ]
+  &#125;;
+&#125;;
+</code></pre>
+<h3 id="ts-静态类型检查"><a href="#ts-静态类型检查" class="headerlink" title="ts 静态类型检查"></a>ts 静态类型检查</h3><pre><code>const ForkTsCheckerWebpackPlugin = require(&#39;fork-ts-checker-webpack-plugin&#39;);
+const ForkTsCheckerNotifierWebpackPlugin = require(&#39;fork-ts-checker-notifier-webpack-plugin&#39;);
+module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config.plugin(&#39;ts-fork&#39;).use(ForkTsCheckerWebpackPlugin, [
+      &#123;
+// 将async设为false，可以阻止Webpack的emit以等待类型检查器/linter，并向Webpack的编译添加错误。
+async: false
+      &#125;
+    ]);
+// 将TypeScript类型检查错误以弹框提示
+// 如果fork-ts-checker-webpack-plugin的async为false时可以不用
+// 否则建议使用，以方便发现错误
+    config.plugin(&#39;ts-notifier&#39;).use(ForkTsCheckerNotifierWebpackPlugin, [
+      &#123;
+title: &#39;TypeScript&#39;,
+excludeWarnings: true,
+skipSuccessful: true
+      &#125;
+    ]);
+  &#125;;
+&#125;;
+</code></pre>
+<h3 id="友好错误提示插件"><a href="#友好错误提示插件" class="headerlink" title="友好错误提示插件"></a>友好错误提示插件</h3><p>config&#x2F;FriendlyErrorsWebpackPlugin.js</p>
+<pre><code>const FriendlyErrorsWebpackPlugin = require(&#39;friendly-errors-webpack-plugin&#39;);
+module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config.plugin(&#39;error&#39;).use(FriendlyErrorsWebpackPlugin);
+  &#125;;
+&#125;;
+</code></pre>
+<h3 id="配置样式，style，css、less、sass、postcss-等"><a href="#配置样式，style，css、less、sass、postcss-等" class="headerlink" title="配置样式，style，css、less、sass、postcss 等"></a>配置样式，style，css、less、sass、postcss 等</h3><pre><code>module.exports = (config, resolve) =&gt; &#123;
+const createCSSRule = (lang, test, loader, options = &#123;&#125;) =&gt; &#123;
+const baseRule = config.module.rule(lang).test(test);
+const normalRule = baseRule.oneOf(&#39;normal&#39;);
+    normalRule
+      .use(&#39;extract-css-loader&#39;)
+      .loader(require(&#39;mini-css-extract-plugin&#39;).loader)
+      .options(&#123;
+hmr: process.env.NODE_ENV === &#39;development&#39;,
+publicPath: &#39;/&#39;
+      &#125;);
+    normalRule
+      .use(&#39;css-loader&#39;)
+      .loader(require.resolve(&#39;css-loader&#39;))
+      .options(&#123;&#125;);
+    normalRule.use(&#39;postcss-loader&#39;).loader(require.resolve(&#39;postcss-loader&#39;));
+if (loader) &#123;
+const rs = require.resolve(loader);
+      normalRule
+        .use(loader)
+        .loader(rs)
+        .options(options);
+    &#125;
+  &#125;;
+return() =&gt; &#123;
+    createCSSRule(&#39;css&#39;, /\.css$/, &#39;css-loader&#39;, &#123;&#125;);
+    createCSSRule(&#39;less&#39;, /\.less$/, &#39;less-loader&#39;, &#123;&#125;);
+    createCSSRule(&#39;scss&#39;, /\.scss$/, &#39;sass-loader&#39;, &#123;&#125;);
+    createCSSRule(&#39;postcss&#39;, /\.p(ost)?css$/);
+  &#125;;
+&#125;;
+</code></pre>
+<h3 id="postcss-配置"><a href="#postcss-配置" class="headerlink" title="postcss 配置"></a>postcss 配置</h3><pre><code>module.exports = &#123;
+plugins: &#123;
+&#39;postcss-px-to-viewport&#39;: &#123;
+unitToConvert: &#39;px&#39;,
+viewportWidth: 750,
+unitPrecision: 5,
+propList: [&#39;*&#39;],
+viewportUnit: &#39;vw&#39;,
+fontViewportUnit: &#39;vw&#39;,
+selectorBlackList: [],
+minPixelValue: 1,
+mediaQuery: false,
+replace: true,
+exclude: [],
+landscape: false,
+landscapeUnit: &#39;vw&#39;,
+landscapeWidth: 568
+    &#125;
+  &#125;
+&#125;;
+</code></pre>
+<h3 id="编译前后-css-对比"><a href="#编译前后-css-对比" class="headerlink" title="编译前后 css 对比"></a>编译前后 css 对比</h3><p>src&#x2F;style&#x2F;index.less</p>
+<pre><code>/* index.less */
+.test &#123;
+  width: 300px;
+&#125;
+</code></pre>
+<p>dist&#x2F;app.css</p>
+<pre><code>/* index.css */
+.test &#123;
+width: 36.66667vw;
+height: 26.66667vw;
+color: red;
+background-color: orange;
+&#125;
+/* app.css */
+.test &#123;
+font-size: 8vw;
+&#125;
+/* index.less */
+.test &#123;
+width: 40vw;
+&#125;
+/* index.scss */
+.test &#123;
+height: 40vw;
+&#125;
+/* index.postcss */
+.test &#123;
+background: green;
+height: 26.66667vw;
+&#125;
+</code></pre>
+<h3 id="配置-autoprefixer"><a href="#配置-autoprefixer" class="headerlink" title="配置 autoprefixer"></a>配置 autoprefixer</h3><p>自动添加 css 前缀</p>
+<p>postcss.config.js</p>
+<pre><code>module.exports = &#123;
+plugins: &#123;
+autoprefixer: &#123;
+overrideBrowserslist: [
+&#39;&gt; 1%&#39;,
+&#39;last 3 versions&#39;,
+&#39;iOS &gt;= 8&#39;,
+&#39;Android &gt;= 4&#39;,
+&#39;Chrome &gt;= 40&#39;
+      ]
+    &#125;
+  &#125;
+&#125;;
+</code></pre>
+<h4 id="转换前"><a href="#转换前" class="headerlink" title="转换前"></a>转换前</h4><pre><code>/* index.css */
+.test &#123;
+width: 200px;
+height: 200px;
+color: red;
+display: flex;
+background-color: orange;
+&#125;
+</code></pre>
+<h4 id="转换后"><a href="#转换后" class="headerlink" title="转换后"></a>转换后</h4><pre><code>/* index.css */
+.test &#123;
+width: 26.66667vw;
+height: 26.66667vw;
+color: red;
+display: -webkit-box;
+display: -webkit-flex;
+display: -ms-flexbox;
+display: flex;
+background-color: orange;
+&#125;
+</code></pre>
+<h3 id="开启-source-map"><a href="#开启-source-map" class="headerlink" title="开启 source map"></a>开启 source map</h3><pre><code>config.devtool(&#39;cheap-source-map&#39;);
+└── dist
+  │── app.bundle.js
+  │── app.bundle.js.map
+  │── app.css
+  │── app.css.map
+  └── index.html
+</code></pre>
+<p>在源文件下会有一行注释，证明开启了 sourcemap</p>
+<pre><code>/*# sourceMappingURL=app.css.map*/
+</code></pre>
+<hr>
+<h2 id="课时-4：webpack性能优化"><a href="#课时-4：webpack性能优化" class="headerlink" title="课时 4：webpack性能优化"></a>课时 4：webpack性能优化</h2><p>本章讲解</p>
+<ol>
+<li>分离 Manifest</li>
+<li>Code Splitting（代码分割）</li>
+<li>Bundle Splitting（打包分割）</li>
+<li>Tree Shaking（删除死代码）</li>
+<li>开启 gzip</li>
+</ol>
+<h3 id="分离-Manifest"><a href="#分离-Manifest" class="headerlink" title="分离 Manifest"></a>分离 Manifest</h3><pre><code>module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config
+      .optimization
+      .runtimeChunk(&#123;
+name: &quot;manifest&quot;
+      &#125;)
+  &#125;
+&#125;
+</code></pre>
+<h3 id="Code-Splitting"><a href="#Code-Splitting" class="headerlink" title="Code Splitting"></a>Code Splitting</h3><ol>
+<li>使用动态 import 或者 require.ensure 语法，在第一节已经讲解</li>
+<li>使用 <code>babel-plugin-import</code> 插件按需引入一些组件库</li>
+</ol>
+<h3 id="Bundle-Splitting"><a href="#Bundle-Splitting" class="headerlink" title="Bundle Splitting"></a>Bundle Splitting</h3><p>将公共的包提取到 <code>chunk-vendors</code> 里面，比如你require(‘vue’)，webpack 会将 vue 打包进 chunk-vendors.bundle.js</p>
+<pre><code>module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config
+      .optimization.splitChunks(&#123;
+chunks: &#39;async&#39;,
+minSize: 30000,
+minChunks: 1,
+maxAsyncRequests: 3,
+maxInitialRequests: 3,
+cacheGroups: &#123;
+vendors: &#123;
+name: `chunk-vendors`,
+test: /[\\/]node_modules[\\/]/,
+priority: -10,
+chunks: &#39;initial&#39;
+          &#125;,
+common: &#123;
+name: `chunk-common`,
+minChunks: 2,
+priority: -20,
+chunks: &#39;initial&#39;,
+reuseExistingChunk: true
+          &#125;
+        &#125;
+      &#125;)
+    config.optimization.usedExports(true)
+  &#125;
+&#125;
+</code></pre>
+<h3 id="Tree-Shaking"><a href="#Tree-Shaking" class="headerlink" title="Tree Shaking"></a>Tree Shaking</h3><p>config&#x2F;optimization.js</p>
+<pre><code>config.optimization.usedExports(true);
+</code></pre>
+<p>src&#x2F;treeShaking.js</p>
+<pre><code>exportfunctionsquare(x) &#123;
+return x * x;
+&#125;
+exportfunctioncube(x) &#123;
+return x * x * x;
+&#125;
+</code></pre>
+<p>在 main.js 中只引用了 cube</p>
+<pre><code>import &#123; cube &#125; from&#39;./treeShaking&#39;;
+console.log(cube(2));
+</code></pre>
+<h4 id="未使用-Tree-Shaking"><a href="#未使用-Tree-Shaking" class="headerlink" title="未使用 Tree Shaking"></a>未使用 Tree Shaking</h4><pre><code>&#123;
+&quot;./src/treeShaking.js&quot;: function(
+    module,
+    __webpack_exports__,
+    __webpack_require__
+) &#123;
+    &quot;use strict&quot;;
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, &quot;square&quot;, function() &#123;
+return square;
+    &#125;);
+    __webpack_require__.d(__webpack_exports__, &quot;cube&quot;, function() &#123;
+return cube;
+    &#125;);
+functionsquare(x) &#123;
+return x * x;
+    &#125;
+functioncube(x) &#123;
+return x * x * x;
+    &#125;
+  &#125;
+&#125;
+</code></pre>
+<h4 id="使用了-Tree-Shaking"><a href="#使用了-Tree-Shaking" class="headerlink" title="使用了 Tree Shaking"></a>使用了 Tree Shaking</h4><p>这里只导出了 cube 函数，并没有将 square 导出去</p>
+<p>当然你可以看见 square 函数还是在 bundle 里面，但是在压缩的时候就会被干掉了，因为它并没有被引用</p>
+<pre><code>&#123;
+&quot;./src/treeShaking.js&quot;: function(
+    module,
+    __webpack_exports__,
+    __webpack_require__
+) &#123;
+    &quot;use strict&quot;;
+    __webpack_require__.d(__webpack_exports__, &quot;a&quot;, function() &#123;
+return cube;
+    &#125;);
+functionsquare(x) &#123;
+return x * x;
+    &#125;
+functioncube(x) &#123;
+return x * x * x;
+    &#125;
+  &#125;
+&#125;
+</code></pre>
+<p>只有当函数给定输入后，产生相应的输出，且不修改任何外部的东西，才可以安全做shaking的操作</p>
+<p>如何使用tree-shaking？</p>
+<ol>
+<li>确保代码是es6格式,即 export，import</li>
+<li>package.json中，设置 sideEffects</li>
+<li>确保 tree-shaking 的函数没有副作用</li>
+<li>babelrc中设置presets [[“@babel&#x2F;preset-env”, { “modules”: false }]] 禁止转换模块，交由webpack进行模块化处理</li>
+<li>结合uglifyjs-webpack-plugin</li>
+</ol>
+<p>其实在 <code>webpack4</code> 我们根本不需要做这些操作了，因为 <code>webpack</code> 在生产环境已经帮我们默认添加好了，开箱即用！</p>
+<h3 id="开启-gzip"><a href="#开启-gzip" class="headerlink" title="开启 gzip"></a>开启 gzip</h3><p>CompressionWebpackPlugin.js</p>
+<pre><code>const CompressionWebpackPlugin = require(&#39;compression-webpack-plugin&#39;);
+module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config.plugin(&#39;CompressionWebpackPlugin&#39;).use(CompressionWebpackPlugin, [
+      &#123;
+algorithm: &#39;gzip&#39;,
+test: /\.js(\?.*)?$/i,
+threshold: 10240,
+minRatio: 0.8
+      &#125;
+    ]);
+  &#125;;
+&#125;;
+</code></pre>
+<hr>
+<h2 id="课时-5：手写loader实现可选链"><a href="#课时-5：手写loader实现可选链" class="headerlink" title="课时 5：手写loader实现可选链"></a>课时 5：手写loader实现可选链</h2><p>本章内容</p>
+<ol>
+<li>什么是 webpack loader</li>
+<li>可选链介绍</li>
+<li>loader 实现可选链</li>
+</ol>
+<h3 id="什么是-webpack-loader"><a href="#什么是-webpack-loader" class="headerlink" title="什么是 webpack loader"></a>什么是 webpack loader</h3><p><code>webpack loader</code> 是 <code>webpack</code> 为了处理各种类型文件的一个中间层，<code>webpack</code> 本质上就是一个 <code>node</code> 模块，它不能处理 <code>js</code> 以外的文件，那么 <code>loader</code> 就帮助 <code>webpack</code> 做了一层转换，将所有文件都转成字符串，你可以对字符串进行任意操作&#x2F;修改，然后返回给 <code>webpack</code> 一个包含这个字符串的对象，让 <code>webpack</code> 进行后面的处理。如果把 <code>webpack</code> 当成一个垃圾工厂的话，那么 <code>loader</code> 就是这个工厂的垃圾分类！</p>
+<h3 id="可选链介绍"><a href="#可选链介绍" class="headerlink" title="可选链介绍"></a>可选链介绍</h3><p>这里并不是纯粹意义上的可选链，因为 <code>babel</code> 跟 <code>ts</code> 都已经支持了，我们也没有必要去写一个完整的可选链，只是来加深一下对 <code>loader</code> 的理解， <code>loader</code> 在工作当中能帮助我们做什么？</p>
+<p><strong><code>用途</code></strong> 当我们访问一个对象属性时不必担心这个对象是 <code>undefined</code> 而报错，导致程序不能继续向下执行</p>
+<p><strong><code>解释</code></strong> 在 <code>?</code> 之前的所有访问链路都是合法的，不会产生报错</p>
+<pre><code>const obj = &#123;
+foo: &#123;
+bar: &#123;
+baz: 2
+    &#125;
+  &#125;
+&#125;
+console.log(obj.foo.bar?.baz) // 2
+// 被转成 obj &amp;&amp; obj.foo &amp;&amp; obj.foo.bar &amp;&amp; obj.foo.bar.baz
+console.log(obj.foo.err?.baz) // undefined
+// 被转成 obj &amp;&amp; obj.foo &amp;&amp; obj.foo.err &amp;&amp; obj.foo.err.baz
+</code></pre>
+<h3 id="loader-实现可选链"><a href="#loader-实现可选链" class="headerlink" title="loader 实现可选链"></a>loader 实现可选链</h3><p>配置loader，options-chain-loader</p>
+<p>config&#x2F;OptionsChainLoader.js</p>
+<pre><code>module.exports = (config, resolve) =&gt; &#123;
+const baseRule = config.module.rule(&#39;js&#39;).test(/.js|.tsx?$/);
+const normalRule = baseRule.oneOf(&#39;normal&#39;);
+return() =&gt; &#123;
+    normalRule
+      .use(&#39;options-chain&#39;)
+      .loader(resolve(&#39;options-chain-loader&#39;))
+  &#125;
+&#125;
+</code></pre>
+<p>其实就是正则替换，<code>loader</code> 将整个文件全部转换成字符串，<code>content</code> 就是整个文件的内容，对 <code>content</code> 进行修改，修改完成后再返回一个新的 <code>content</code> 就完成了一个 <code>loader</code> 转换。是不是很简单？</p>
+<p>下面的操作意思就是，我们匹配 <code>obj.foo.bar?.</code> 并把它转成 <code>obj &amp;&amp; obj.foo &amp;&amp; obj.foo.bar &amp;&amp; obj.foo.bar.</code></p>
+<p>options-chain-loader.js</p>
+<pre><code>module.exports = function(content) &#123;
+return content.replace(newRegExp(/([\$_\w\.]+\?\.)/,&#39;g&#39;),function(res) &#123;
+let str  = res.replace(/\?\./,&#39;&#39;);
+let arrs = str.split(&#39;.&#39;);
+let strArr = [];
+for(let i = 1; i &lt;= arrs.length; i++) &#123;
+      strArr.push(arrs.slice(0,i).join(&#39;.&#39;));
+    &#125;
+let compile = strArr.join(&#39;&amp;&amp;&#39;);
+const done = compile + &#39;&amp;&amp;&#39; + str + &#39;.&#39;
+return  done;
+  &#125;);
+&#125;;
+</code></pre>
+<hr>
+<h2 id="课时-6：webpack编译优化"><a href="#课时-6：webpack编译优化" class="headerlink" title="课时 6：webpack编译优化"></a>课时 6：webpack编译优化</h2><p>本章内容</p>
+<ol>
+<li>cache-loader</li>
+<li>DllPlugin</li>
+<li>threadLoader</li>
+</ol>
+<h3 id="cache-loader"><a href="#cache-loader" class="headerlink" title="cache-loader"></a>cache-loader</h3><p><code>cache-loader</code> 主要是将打包好的文件缓存在硬盘的一个目录里，一般存在 <code>node_modules/.cache</code> 下，当你再次 <code>build</code> 的时候如果此文件没有修改就会从缓存中读取已经编译过的文件，只有有改动的才会被编译，这样就大大降低了编译的时间。尤其是项目越大时越明显。</p>
+<p>此项目使用前后数据对比 3342ms –&gt; 2432ms 效果还是比较明显</p>
+<p>这里只对 babel 加入了 cache-loader，因为我们的 ts&#x2F;js 都是由 babel 进行编译的，不需要对 ts-loader 缓存（我们也没有用到）</p>
+<p>config&#x2F;cacheLoader.js</p>
+<pre><code>module.exports = (config, resolve) =&gt; &#123;
+const baseRule = config.module.rule(&#39;js&#39;).test(/.js|.tsx?$/);
+const babelPath = resolve(&#39;babel.js&#39;)
+const babelConf = require(babelPath);
+const version = require(resolve(&#39;node_modules/@babel/core/package.json&#39;)).version
+return() =&gt; &#123;
+    baseRule
+      .exclude
+      .add(filepath =&gt; &#123;
+// 不缓存 node_modules 下的文件
+return/node_modules/.test(filepath)
+      &#125;)
+      .end()
+      .use(&#39;cache-loader&#39;)
+      .loader(&#39;cache-loader&#39;)
+      .options(&#123;
+// 缓存位置
+        cacheDirectory: resolve(&#39;node_modules/.cache/babel&#39;)
+      &#125;)
+  &#125;
+&#125;
+</code></pre>
+<h3 id="DllPlugin"><a href="#DllPlugin" class="headerlink" title="DllPlugin"></a>DllPlugin</h3><p>DllPlugin 是将第三方长期不变的包与实际项目隔离开来并分别打包，当我们 build 时再将已经打包好的 dll 包引进来就 ok 了</p>
+<p>我提取了两个包 vue、react，速度差不多提升了 200ms，从 2698ms 到 2377ms</p>
+<h4 id="打包-dll"><a href="#打包-dll" class="headerlink" title="打包 dll"></a>打包 dll</h4><p>build&#x2F;dll.js</p>
+<pre><code>const path = require(&quot;path&quot;);
+const dllPath = path.join(process.cwd(), &#39;dll&#39;);
+const Config = require(&#39;webpack-chain&#39;);
+const config = new Config();
+const webpack = require(&#39;webpack&#39;)
+const rimraf = require(&#39;rimraf&#39;);
+const ora = require(&#39;ora&#39;)
+const chalk = require(&#39;chalk&#39;)
+const BundleAnalyzerPlugin = require(&#39;../config/BundleAnalyzerPlugin&#39;)(config)
+BundleAnalyzerPlugin()
+config
+  .entry(&#39;dll&#39;)
+  .add(&#39;vue&#39;)
+  .add(&#39;react&#39;)
+  .end()
+  .set(&#39;mode&#39;, &quot;production&quot;)
+  .output
+  .path(dllPath)
+  .filename(&#39;[name].js&#39;)
+  .library(&quot;[name]&quot;)
+  .end()
+  .plugin(&#39;DllPlugin&#39;)
+  .use(webpack.DllPlugin, [&#123;
+name: &quot;[name]&quot;,
+path: path.join(process.cwd(), &#39;dll&#39;, &#39;manifest.json&#39;),
+  &#125;])
+  .end()
+rimraf.sync(path.join(process.cwd(), &#39;dll&#39;))
+const spinner = ora(&#39;开始构建项目...&#39;)
+spinner.start()
+webpack(config.toConfig(), function (err, stats) &#123;
+  spinner.stop()
+if (err) throw err
+  process.stdout.write(stats.toString(&#123;
+colors: true,
+modules: false,
+children: false,
+chunks: false,
+chunkModules: false
+  &#125;) + &#39;\n\n&#39;)
+if (stats.hasErrors()) &#123;
+console.log(chalk.red(&#39;构建失败\n&#39;))
+    process.exit(1)
+  &#125;
+console.log(chalk.cyan(&#39;build完成\n&#39;))
+&#125;)
+</code></pre>
+<h3 id="将-dll-包合并"><a href="#将-dll-包合并" class="headerlink" title="将 dll 包合并"></a>将 dll 包合并</h3><pre><code>const webpack = require(&#39;webpack&#39;)
+module.exports = (config, resolve) =&gt; &#123;
+return() =&gt; &#123;
+    config.plugin(&#39;DllPlugin&#39;)
+      .use(webpack.DllReferencePlugin, [&#123;
+context: process.cwd(),
+manifest: require(resolve(&#39;dll/manifest.json&#39;))
+      &#125;])
+  &#125;
+&#125;
+</code></pre>
+<h3 id="threadLoader"><a href="#threadLoader" class="headerlink" title="threadLoader"></a>threadLoader</h3><p>测试效果变差了 😅，线程数越小编译速度越快</p>
+<p>config&#x2F;threadLoader.js</p>
+<pre><code>module.exports = (config, resolve) =&gt; &#123;
+const baseRule = config.module.rule(&#39;js&#39;).test(/.js|.tsx?$/);
+return() =&gt; &#123;
+const useThreads = true;
+if (useThreads) &#123;
+const threadLoaderConfig = baseRule
+        .use(&#39;thread-loader&#39;)
+        .loader(&#39;thread-loader&#39;);
+      threadLoaderConfig.options(&#123; workers: 3 &#125;)
+    &#125;
+  &#125;
+&#125;
+</code></pre>
+<hr>
+<h2 id="课时-7：多页面配置"><a href="#课时-7：多页面配置" class="headerlink" title="课时 7：多页面配置"></a>课时 7：多页面配置</h2><p><strong>注意</strong></p>
+<ul>
+<li><code>弃用</code> npm run build &amp; npm run dev &amp; npm run dll</li>
+<li><code>改成</code> box build &amp; box dev &amp; box dll</li>
+<li><code>link</code> npm link 将 box 命令链接到全局</li>
+</ul>
+<p>本章内容</p>
+<ol>
+<li>使用</li>
+<li>改造为脚手架</li>
+<li>多页面配置</li>
+</ol>
+<h3 id="使用-1"><a href="#使用-1" class="headerlink" title="使用"></a>使用</h3><pre><code>box build # 不加参数则会编译所有页面，并清空 dist
+box dev   # 默认编译 index 页面
+</code></pre>
+<p><code>参数</code></p>
+<pre><code># index2 是指定编译的页面。不会清空 dist
+# report 开启打包分析
+box build index2 --report
+box dev index2 --report
+</code></pre>
+<h3 id="改造为脚手架"><a href="#改造为脚手架" class="headerlink" title="改造为脚手架"></a>改造为脚手架</h3><p>分成三个命令，进行不同操作</p>
+<ul>
+<li>build</li>
+<li>dev</li>
+<li>dll</li>
+</ul>
+<p>bin&#x2F;box.js</p>
+<pre><code>#!/usr/bin/env node
+const chalk = require(&#39;chalk&#39;)
+const program = require(&#39;commander&#39;)
+const packageConfig = require(&#39;../package.json&#39;);
+const &#123; cleanArgs &#125; = require(&#39;../lib&#39;)
+const path = require(&#39;path&#39;)
+const __name__ = `build,dev,dll`
+let boxConf = &#123;&#125;
+let lock = false
+try &#123;
+  boxConf = require(path.join(process.cwd(), &#39;box.config.js&#39;))()
+&#125; catch (error) &#123; &#125;
+program
+  .usage(&#39;&lt;command&gt; [options]&#39;)
+  .version(packageConfig.version)
+  .command(&#39;build [app-page]&#39;)
+  .description(`构建开发环境`)
+  .option(&#39;-r, --report&#39;, &#39;打包分析报告&#39;)
+  .option(&#39;-d, --dll&#39;, &#39;合并差分包&#39;)
+  .action(async (name, cmd) =&gt; &#123;
+const options = cleanArgs(cmd)
+const args = Object.assign(options, &#123; name &#125;, boxConf)
+if (lock) return
+    lock = true;
+if (boxConf.pages) &#123;
+Object.keys(boxConf.pages).forEach(page =&gt; &#123;
+        args.name = page;
+require(&#39;../build/build&#39;)(args)
+      &#125;)
+    &#125; else &#123;
+require(&#39;../build/build&#39;)(args)
+    &#125;
+  &#125;)
+program
+  .usage(&#39;&lt;command&gt; [options]&#39;)
+  .version(packageConfig.version)
+  .command(&#39;dev [app-page]&#39;)
+  .description(`构建生产环境`)
+  .option(&#39;-d, --dll&#39;, &#39;合并差分包&#39;)
+  .action(async (name, cmd) =&gt; &#123;
+const options = cleanArgs(cmd)
+const args = Object.assign(options, &#123; name &#125;, boxConf)
+if (lock) return
+    lock = true;
+require(&#39;../build/dev&#39;)(args)
+  &#125;)
+program
+  .usage(&#39;&lt;command&gt; [options]&#39;)
+  .version(packageConfig.version)
+  .command(&#39;dll [app-page]&#39;)
+  .description(`编译差分包`)
+  .action(async (name, cmd) =&gt; &#123;
+const options = cleanArgs(cmd)
+const args = Object.assign(options, &#123; name &#125;, boxConf)
+if (lock) return
+    lock = true;
+require(&#39;../build/dll&#39;)(args)
+  &#125;)
+program.parse(process.argv).args &amp;&amp; program.parse(process.argv).args[0];
+program.commands.forEach(c =&gt; c.on(&#39;--help&#39;, () =&gt; console.log()))
+if (process.argv[2] &amp;&amp; !__name__.includes(process.argv[2])) &#123;
+console.log()
+console.log(chalk.red(`  没有找到 $&#123;process.argv[2]&#125; 命令`))
+console.log()
+  program.help()
+&#125;
+if (!process.argv[2]) &#123;
+  program.help()
+&#125;
+</code></pre>
+<h3 id="多页面配置"><a href="#多页面配置" class="headerlink" title="多页面配置"></a>多页面配置</h3><p>box.config.js</p>
+<pre><code>module.exports = function (config) &#123;
+return &#123;
+entry: &#39;src/main.js&#39;, // 默认入口
+    dist: &#39;dist&#39;, // 默认打包目录
+    publicPath: &#39;/&#39;,
+port: 8888,
+pages: &#123;
+index: &#123;
+entry: &#39;src/main.js&#39;,
+template: &#39;public/index.html&#39;,
+filename: &#39;index.html&#39;,
+      &#125;,
+index2: &#123;
+entry: &#39;src/main.js&#39;,
+template: &#39;public/index2.html&#39;,
+filename: &#39;index2.html&#39;,
+      &#125;
+    &#125;,
+    chainWebpack(config) &#123;
+    &#125;
+  &#125;
+&#125;
+</code></pre>
+<hr>
+<h2 id="课时-8：手写一个webpack插件"><a href="#课时-8：手写一个webpack插件" class="headerlink" title="课时 8：手写一个webpack插件"></a>课时 8：手写一个webpack插件</h2><p>如果把 webpack 当成一个垃圾工厂，loader 就是垃圾分类，将所有垃圾整理好交给 webpack。plugin 就是如何去处理这些垃圾。</p>
+<p>webpack 插件写起来很简单，就是你要知道各种各样的钩子在什么时候触发，然后你的逻辑写在钩子里面就ok了</p>
+<ul>
+<li><code>apply</code> 函数是 webpack 在调用 plugin 的时候执行的，你可以认为它是入口</li>
+<li><code>compiler</code> 暴露了和 webpack 整个生命周期相关的钩子</li>
+<li><code>Compilation</code> 暴露了与模块和依赖有关的粒度更小的事件钩子</li>
+</ul>
+<p><strong>本节概要</strong></p>
+<ul>
+<li>实现一个 CopyPlugin</li>
+<li>使用</li>
+</ul>
+<h3 id="实现一个-CopyPlugin"><a href="#实现一个-CopyPlugin" class="headerlink" title="实现一个 CopyPlugin"></a>实现一个 CopyPlugin</h3><p>我们今天写一个 copy 的插件，在webpack构建完成之后，将目标目录下的文件 copy 到另一个目录下</p>
+<pre><code>const fs = require(&#39;fs-extra&#39;)
+const globby = require(&#39;globby&#39;)
+classCopyDirWebpackPlugin&#123;
+constructor(options) &#123;
+this.options = options;
+  &#125;
+  apply(compiler) &#123;
+const opt = this.options
+    compiler.plugin(&#39;done&#39;, (stats) =&gt; &#123;
+if (process.env.NODE_ENV === &#39;production&#39;) &#123;
+        (async ()=&gt;&#123;
+const toFilesPath = await globby([`$&#123;opt.to&#125;/**`, &#39;!.git/**&#39;])
+          toFilesPath.forEach(filePath =&gt; fs.removeSync(filePath))
+const fromFilesPath = await globby([`$&#123;opt.from&#125;/**`])
+          fromFilesPath.forEach(fromPath =&gt; &#123;
+const cachePath = fromPath
+            fromPath = fromPath.replace(&#39;dist&#39;, opt.to)
+const dirpaths = fromPath.substring(0, fromPath.lastIndexOf(&#39;/&#39;))
+            fs.mkdirpSync(dirpaths)
+            fs.copySync(cachePath, fromPath)
+          &#125;)
+console.log(`  完成copy $&#123;opt.from&#125; to $&#123;opt.to&#125;`)
+        &#125;)()
+      &#125;
+    &#125;);
+  &#125;
+&#125;
+module.exports = CopyDirWebpackPlugin
+</code></pre>
+<h3 id="使用-2"><a href="#使用-2" class="headerlink" title="使用"></a>使用</h3><p>将打包出来的 dist 目录下的内容 copy 到 dist2 目录下</p>
+<pre><code>const CopyPlugin = require(&#39;../webapck-plugin-copy&#39;);
+module.exports = (&#123; config &#125;) =&gt; &#123;
+return() =&gt; &#123;
+    config.plugin(&#39;copy-dist&#39;)
+      .use(CopyPlugin, [&#123;
+from: &#39;dist&#39;,
+to: &#39;dist2&#39;
+      &#125;])
+  &#125;
+&#125;
+</code></pre>
+<hr>
+<h2 id="课时-9：构建-ssr"><a href="#课时-9：构建-ssr" class="headerlink" title="课时 9：构建 ssr"></a>课时 9：构建 ssr</h2><p>ssr 就是服务端渲染，做 ssr 的好处就是为了处理 spa 的不足，比如 seo 优化，服务端缓存等问题。</p>
+<p>今天主要用 react 的 ssr 来做一个简单的实例，让大家更清晰的入门</p>
+<p>本章概要</p>
+<ul>
+<li>创建 box build:ssr</li>
+<li>编译 ssr</li>
+<li>编译 jsx 语法</li>
+<li>入口区分服务端&#x2F;客户端</li>
+<li>服务端渲染</li>
+<li>小结</li>
+</ul>
+<h3 id="创建-box-build-ssr"><a href="#创建-box-build-ssr" class="headerlink" title="创建 box build:ssr"></a>创建 box build:ssr</h3><p>老规矩，先来一个 <code>box build:ssr</code> 命令让程序可以执行</p>
+<p>执行 <code>box build:ssr</code> 会调用 <code>build/ssr</code> 执行编译</p>
+<pre><code>program
+  .usage(&#39;&lt;command&gt; [options]&#39;)
+  .version(packageConfig.version)
+  .command(&#39;build:ssr [app-page]&#39;)
+  .description(`服务端渲染`)
+  .action(async (name, cmd) =&gt; &#123;
+const options = cleanArgs(cmd);
+const args = Object.assign(options, &#123; name &#125;, boxConf);
+if (lock) return;
+    lock = true;
+require(&#39;../build/ssr&#39;)(args);
+  &#125;);
+</code></pre>
+<h3 id="编译-ssr"><a href="#编译-ssr" class="headerlink" title="编译 ssr"></a>编译 ssr</h3><p>与其他的编译没有什么区别，值得住的是</p>
+<ul>
+<li><p>target 指定为 umd 模式</p>
+</li>
+<li><p>globalObject 为 this</p>
+</li>
+<li><p>入口改为 ssr.jsx</p>
+<p>  .libraryTarget(‘umd’)<br>  .globalObject(‘this’)</p>
+</li>
+</ul>
+<p>build&#x2F;ssr.js</p>
+<pre><code>module.exports = function(options) &#123;
+const path = require(&#39;path&#39;);
+const Config = require(&#39;webpack-chain&#39;);
+const config = new Config();
+const webpack = require(&#39;webpack&#39;);
+const rimraf = require(&#39;rimraf&#39;);
+const ora = require(&#39;ora&#39;);
+const chalk = require(&#39;chalk&#39;);
+const PATHS = &#123;
+build: path.join(process.cwd(), &#39;static&#39;),
+ssrDemo: path.join(process.cwd(), &#39;src&#39;, &#39;ssr.jsx&#39;)
+  &#125;;
+require(&#39;../config/babelLoader&#39;)(&#123; config, tsx: true &#125;)();
+require(&#39;../config/HtmlWebpackPlugin&#39;)(&#123;
+    config,
+options: &#123;
+publicPath: &#39;/&#39;,
+filename: &#39;client.ssr.html&#39;
+    &#125;
+  &#125;)();
+  config
+    .entry(&#39;ssr&#39;)
+    .add(PATHS.ssrDemo)
+    .end()
+    .set(&#39;mode&#39;, &#39;development&#39;) //  production
+    .output.path(PATHS.build)
+    .filename(&#39;[name].js&#39;)
+    .libraryTarget(&#39;umd&#39;)
+    .globalObject(&#39;this&#39;)
+    .library(&#39;[name]&#39;)
+    .end();
+  rimraf.sync(path.join(process.cwd(), PATHS.build));
+const spinner = ora(&#39;开始构建项目...&#39;);
+  spinner.start();
+  webpack(config.toConfig(), function(err, stats) &#123;
+    spinner.stop();
+if (err) throw err;
+    process.stdout.write(
+      stats.toString(&#123;
+colors: true,
+modules: false,
+children: false,
+chunks: false,
+chunkModules: false
+      &#125;) + &#39;\n\n&#39;
+    );
+if (stats.hasErrors()) &#123;
+console.log(chalk.red(&#39;构建失败\n&#39;));
+      process.exit(1);
+    &#125;
+console.log(chalk.cyan(&#39;build完成\n&#39;));
+  &#125;);
+&#125;;
+</code></pre>
+<h3 id="编译-jsx-语法"><a href="#编译-jsx-语法" class="headerlink" title="编译 jsx 语法"></a>编译 jsx 语法</h3><p>因为我们是用 react 写的，避免不了会用到 jsx 语法，所以我们需要在 <code>babel-loader</code> 中使用 <code>@babel/preset-react</code></p>
+<pre><code>npm i @babel/preset-react -D
+</code></pre>
+<p>config&#x2F;babelLoader.js</p>
+<pre><code>if (tsx) &#123;
+  babelConf.presets.push(&#39;@babel/preset-react&#39;);
+&#125;
+</code></pre>
+<h3 id="入口区分服务端-x2F-客户端"><a href="#入口区分服务端-x2F-客户端" class="headerlink" title="入口区分服务端&#x2F;客户端"></a>入口区分服务端&#x2F;客户端</h3><p>区分服务端跟客户端分别渲染</p>
+<pre><code>const React = require(&quot;react&quot;);
+const ReactDOM = require(&quot;react-dom&quot;);
+const SSR = &lt;divonClick=&#123;() =&gt; alert(&quot;hello&quot;)&#125;&gt;Hello world&lt;/div&gt;;
+if (typeofdocument === &quot;undefined&quot;) &#123;
+console.log(&#39;在服务端渲染&#39;)
+module.exports = SSR;
+&#125; else &#123;
+console.log(&#39;在客户端渲染&#39;)
+const renderMethod = !module.hot ? ReactDOM.render : ReactDOM.hydrate;
+  renderMethod(SSR, document.getElementById(&quot;app&quot;));
+&#125;
+</code></pre>
+<h3 id="服务端渲染"><a href="#服务端渲染" class="headerlink" title="服务端渲染"></a>服务端渲染</h3><ul>
+<li><p>将打包出来的 static 文件夹作为一个服务</p>
+</li>
+<li><p>访问 <code>http://127.0.0.1:8080</code>，进入服务端渲染的页面</p>
+</li>
+<li><p>再执行一遍 ssr.js 进行事件绑定</p>
+<p>  module.exports &#x3D; function (options) {<br>  const express &#x3D; require(“express”);<br>  const { renderToString } &#x3D; require(“react-dom&#x2F;server”);<br>  const chalk &#x3D; require(‘chalk’)</p>
+<p>  const SSR &#x3D; require(“..&#x2F;static&#x2F;ssr”);<br>  const port &#x3D; process.env.PORT || 8080;</p>
+<pre><code>server(port);
+</code></pre>
+<p>  functionserver(port) {<br>  const app &#x3D; express();<br>  app.use(express.static(“static”));<br>  app.get(“&#x2F;“, (req, res) &#x3D;&gt;<br>    res.status(200).send(renderMarkup(renderToString(SSR)))<br>  );<br>  const empty &#x3D; ‘    ‘<br>  const common &#x3D; <code>App running at:     - Local: http://127.0.0.1:$&#123;port&#125;\n</code><br>  console.log(chalk.cyan(‘\n’ + empty + common))</p>
+<pre><code>  app.listen(port, () =&gt; process.send &amp;&amp; process.send(&quot;online&quot;));
+&#125;
+</code></pre>
+<p>  functionrenderMarkup(html) {<br>  return<code>&lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt;     &lt;title&gt;Webpack SSR Demo&lt;/title&gt;     &lt;meta charset=&quot;utf-8&quot; /&gt;   &lt;/head&gt;   &lt;body&gt;     &lt;div id=&quot;app&quot;&gt;$&#123;html&#125;&lt;/div&gt;     &lt;script src=&quot;./ssr.js&quot;&gt;&lt;/script&gt;   &lt;/body&gt; &lt;/html&gt;</code>;<br>}<br>  }</p>
+</li>
+</ul>
+<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>至此 ssr 已经结束了，其实所有看起来很高大上的技术都是从一点一滴积累起来的，只要我们明白原理，你也能做出更优秀的框架</p>
+<p><strong>推荐阅读</strong></p>
+<p>（点击标题可跳转阅读）</p>
+<p><a target="_blank" rel="noopener" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651557158&amp;idx=1&amp;sn=37b5709e442840d03391049fccebedbb&amp;chksm=80255ae7b752d3f1a37ca753aeeacdde8502d525e86f5ae1b0fbb2a780c3c4e627a16fbc05b0&amp;scene=21#wechat_redirect">一看就懂之 webpack 高级配置与优化</a></p>
+<p><a target="_blank" rel="noopener" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651557068&amp;idx=1&amp;sn=570f0ab7f1cf096f22d4446058f86279&amp;chksm=80255b0db752d21bfbf5930e997341da18c3c36c6387711806b4d0404b54ecfcfccade114bc3&amp;scene=21#wechat_redirect">一文搞懂 Webpack 多入口配置</a></p>
+<p><a target="_blank" rel="noopener" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651557043&amp;idx=2&amp;sn=531feefa5133f279ccae6242ea16e0c0&amp;chksm=80255b72b752d264692bfee6d71ed582cef914c526fc18b5ddcc841cc4f64c07e447dff06a42&amp;scene=21#wechat_redirect">愿未来没有 Webpack</a></p>
+<p>觉得本文对你有帮助？请分享给更多人</p>
+<p>关注「前端大全」加星标，提升前端技能</p>
+<p><img src="https://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib3jzxuxibgz8GJ7k0UVp4kHMMDsL32ialKjpkgA9q7BFkbJ8VRYh0Liad1x6rD7w6oU7icR9DVPgsIxzQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn"></p>
+<p>好文章，我在看❤️</p>
+</div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/25164.html">https://xuehuayu.cn/article/25164.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/54912.html">浏览器与前端性能灵魂之问，请问你能接得住几个？</a><a class="next" href="/article/26083.html">OSCHINA 公布 2019 年度最受欢迎中国开源软件</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
+const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
+const locale = {
+  placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
+  sofa: '沙发空缺中，还不快抢~',
+};
+Waline.init({
+  el: '#vcomment',
+  serverURL: serverURL,
+  pageSize: '20',
+  visitor: true, // 阅读量统计
+  requiredMeta: ['nick', 'mail'],
+  emoji: [
+    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
+    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
+    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
+  ],
+  locale,
+  pageview: true
+})
+</script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
+  var val = $(this).val()
+  var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
+  var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
+  var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
+  if (val === 'self') {
+      $('#search').html(self)
+      var search_path = 'search.xml';
+      if (search_path.length == 0) {
+        search_path = 'search.xml';
+      }
+      var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
+      searchFunc(path, 'local-search-input', 'local-search-result');
+  } else if (val === 'baidu') {
+      $('#search').html(baidu)
+  } else if (val === 'google') {
+      $('#search').html(google)
+  }
+})</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
+  var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
+  if (cnb) {
+    var gxba =document.getElementById('gxba')
+    var gaba =document.getElementById('gaba')
+    var gabaLink =document.getElementById('gaba-link')
+    gxba.innerText ='京ICP备20007647号-1'
+    gaba.innerText ='京公网安备 11010802031254号'
+    gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
+  }
+})()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>