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
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. 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
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. 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
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/46911.html ADDED
@@ -0,0 +1,517 @@
1
+ <!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(基于babel 7版本) | 前端壹菜鸟</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(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </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);})();
18
+ </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');
19
+ </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(基于babel 7版本)</h1><div class="post-meta"><span class="date">2019-10-02</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"> 2.3k</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"> 12</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/46911.html#vcomment"><span class="waline-comment-count" data-path="/article/46911.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://github.com/YvetteLau/Blog/issues/1</code></p>
20
+ <span id="more"></span>
21
+
22
+ <blockquote>
23
+ <h3 id="webpack-核心概念"><a href="#webpack-核心概念" class="headerlink" title="webpack 核心概念:"></a>webpack 核心概念:</h3></blockquote>
24
+ <ul>
25
+ <li>Entry: 入口</li>
26
+ <li>Module:模块，webpack中一切皆是模块</li>
27
+ <li>Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割</li>
28
+ <li>Loader:模块转换器，用于把模块原内容按照需求转换成新内容</li>
29
+ <li>Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
30
+ <li>Output: 输出结果</li>
31
+ </ul>
32
+ <blockquote>
33
+ <h3 id="webpack流程"><a href="#webpack流程" class="headerlink" title="webpack流程:"></a>webpack流程:</h3></blockquote>
34
+ <p>webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。</p>
35
+ <p>下面我们开始从零开始配置一个支持打包图片,CSS,LESS,SASS,支持ES6&#x2F;ES7和JSX语法，并对代码进行压缩的webpack配置.</p>
36
+ <blockquote>
37
+ <h3 id="1-最简webpack配置"><a href="#1-最简webpack配置" class="headerlink" title="1. 最简webpack配置"></a>1. 最简webpack配置</h3></blockquote>
38
+ <p>首先初始化npm和安装webpack的依赖:</p>
39
+ <pre><code>npm init -y
40
+ npm install --save-dev webpack webpack-cli
41
+ </code></pre>
42
+ <p>配置 webpack.config.js 文件如下:</p>
43
+ <pre><code>constpath=require(&#39;path&#39;);
44
+
45
+ module.exports= &#123;
46
+ entry:path.resolve(__dirname, &#39;src/index.js&#39;),
47
+ output: &#123;
48
+ path:path.resolve(__dirname, &#39;dist&#39;),
49
+ filename:&#39;bundle.js&#39;,
50
+ publicPath:&#39;/&#39;
51
+ &#125;
52
+ &#125;
53
+ </code></pre>
54
+ <p>说明: publicPath 上线时配置的是cdn的地址。</p>
55
+ <p>使用命令进行打包:</p>
56
+ <pre><code>webpack --mode production
57
+ </code></pre>
58
+ <p>也可以将其配置到 package.json 中的 scripts 字段.</p>
59
+ <p>入口文件为 src&#x2F;index.js, 打包输出到 dist&#x2F;bundle.js.</p>
60
+ <blockquote>
61
+ <h3 id="2-使用模板-html"><a href="#2-使用模板-html" class="headerlink" title="2. 使用模板 html"></a>2. 使用模板 html</h3></blockquote>
62
+ <p>html-webpack-plugin 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js.</p>
63
+ <p>安装依赖:</p>
64
+ <pre><code>npm install --save-dev html-webpack-plugin
65
+ </code></pre>
66
+ <p>在 webpack.config.js 增加 plugins 配置:</p>
67
+ <pre><code>constHtmlWebpackPlugin=require(&#39;html-webpack-plugin&#39;);
68
+ module.exports= &#123;
69
+ //...other code
70
+ plugins: [
71
+ newHtmlWebpackPlugin(&#123;
72
+ template:path.resolve(__dirname, &#39;src/index.html&#39;)
73
+ &#125;)
74
+ ]
75
+ &#125;
76
+ </code></pre>
77
+ <p>HtmlWebpackPlugin 还有一些其它的参数,如title(html的title),minify(是否要压缩),filename(dist中生成的html的文件名)等</p>
78
+ <blockquote>
79
+ <h3 id="3-配置-webpack-dev-server"><a href="#3-配置-webpack-dev-server" class="headerlink" title="3. 配置 webpack-dev-server"></a>3. 配置 webpack-dev-server</h3></blockquote>
80
+ <p>webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力</p>
81
+ <p>安装依赖:</p>
82
+ <pre><code>npm install --save-dev webpack-dev-server
83
+ </code></pre>
84
+ <p>在 webpack.config.js 增加 devServer 配置:</p>
85
+ <pre><code>constpath=require(&#39;path&#39;);
86
+ constHtmlWebpackPlugin=require(&#39;html-webpack-plugin&#39;);
87
+ module.exports= &#123;
88
+ //...other code
89
+ devServer: &#123;
90
+ contentBase:&#39;./dist&#39;,
91
+ port:&#39;8080&#39;,
92
+ host:&#39;localhost&#39;
93
+ &#125;
94
+ &#125;
95
+ </code></pre>
96
+ <p>在 package.json 的 scripts 字段中增加:</p>
97
+ <pre><code>webpack-dev-server --mode development
98
+ </code></pre>
99
+ <p>之后，我们就可以通过 npm run dev , 来启动服务。</p>
100
+ <p>更多 webpack-dev-server 的知识，请访问: <a target="_blank" rel="noopener" href="https://webpack.js.org/configuration/dev-server/">https://webpack.js.org/configuration/dev-server/</a></p>
101
+ <blockquote>
102
+ <h3 id="4-支持加载css文件"><a href="#4-支持加载css文件" class="headerlink" title="4. 支持加载css文件"></a>4. 支持加载css文件</h3></blockquote>
103
+ <p>通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成JS文件类型。</p>
104
+ <p>安装依赖:</p>
105
+ <pre><code>npm install --save-dev style-loader css-loader
106
+ </code></pre>
107
+ <p>在 webpack.config.js 中增加 loader 的配置。</p>
108
+ <pre><code>module.exports= &#123;
109
+ //other code
110
+ module: &#123;
111
+ rules: [
112
+ &#123;
113
+ test:/\.css/,
114
+ use: [&#39;style-loader&#39;, &#39;css-loader&#39;],
115
+ exclude:/node_modules/,
116
+ include:path.resolve(__dirname, &#39;src&#39;)
117
+ &#125;
118
+ ]
119
+ &#125;
120
+ &#125;
121
+ </code></pre>
122
+ <p>loader 可以配置以下参数:</p>
123
+ <ul>
124
+ <li>test: 匹配处理文件的扩展名的正则表达式</li>
125
+ <li>use: loader名称</li>
126
+ <li>include&#x2F;exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹</li>
127
+ <li>query: 为loader提供额外的设置选项</li>
128
+ </ul>
129
+ <p>如果需要给loader传参，那么可以使用use+loader的方式,如:</p>
130
+ <pre><code>module.exports= &#123;
131
+ //other code
132
+ module: &#123;
133
+ rules: [
134
+ &#123;
135
+ use: [&#123;
136
+ loader:&#39;style-loader&#39;,
137
+ options: &#123;
138
+ insertAt:&#39;top&#39;
139
+ &#125;
140
+ &#125;,
141
+ &#39;css-loader&#39;
142
+ ],
143
+ //....
144
+ &#125;
145
+ ]
146
+ &#125;
147
+ &#125;
148
+ </code></pre>
149
+ <blockquote>
150
+ <h3 id="5-支持加载图片"><a href="#5-支持加载图片" class="headerlink" title="5. 支持加载图片"></a>5. 支持加载图片</h3></blockquote>
151
+ <ul>
152
+ <li>file-loader: 解决CSS等文件中的引入图片路径问题</li>
153
+ <li>url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候还是使用file-loader进行拷贝</li>
154
+ </ul>
155
+ <p><strong>如果希望图片存放在单独的目录下，那么需要指定outputPath</strong></p>
156
+ <p>安装依赖:</p>
157
+ <pre><code>npm install --save-dev url-loader file-loader
158
+ </code></pre>
159
+ <p>在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的数组中)。</p>
160
+ <pre><code>module.exports= &#123;
161
+ //other code
162
+ module: &#123;
163
+ rules: [
164
+ &#123;
165
+ test:/\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
166
+ use: [
167
+ &#123;
168
+ loader:&#39;url-loader&#39;,
169
+ options: &#123;
170
+ limit:8192,
171
+ outputPath:&#39;images&#39;
172
+ &#125;
173
+ &#125;
174
+ ]
175
+ &#125;
176
+ ]
177
+ &#125;
178
+ &#125;
179
+ </code></pre>
180
+ <blockquote>
181
+ <h3 id="6-支持编译less和sass"><a href="#6-支持编译less和sass" class="headerlink" title="6.支持编译less和sass"></a>6.支持编译less和sass</h3></blockquote>
182
+ <p>有些前端同事可能习惯于使用less或者是sass编写css，那么也需要在 webpack 中进行配置。</p>
183
+ <p>安装对应的依赖:</p>
184
+ <pre><code>npm install --save-dev less less-loader
185
+ npm install --save-dev node-sass sass-loader
186
+ </code></pre>
187
+ <p>在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。</p>
188
+ <pre><code>module.exports= &#123;
189
+ //other code
190
+ module: &#123;
191
+ rules: [
192
+ &#123;
193
+ test:/\.less/,
194
+ use: [&#39;style-loader&#39;, &#39;css-loader&#39;, &#39;less-loader&#39;],
195
+ exclude:/node_modules/,
196
+ include:path.resolve(__dirname, &#39;src&#39;)
197
+ &#125;,
198
+ &#123;
199
+ test:/\.scss/,
200
+ use: [&#39;style-loader&#39;, &#39;css-loader&#39;, &#39;sass-loader&#39;],
201
+ exclude:/node_modules/,
202
+ include:path.resolve(__dirname, &#39;src&#39;)
203
+ &#125;
204
+ ]
205
+ &#125;
206
+ &#125;
207
+ </code></pre>
208
+ <blockquote>
209
+ <h3 id="7-支持转义-ES6-x2F-ES7-x2F-JSX"><a href="#7-支持转义-ES6-x2F-ES7-x2F-JSX" class="headerlink" title="7.支持转义 ES6&#x2F;ES7&#x2F;JSX"></a>7.支持转义 ES6&#x2F;ES7&#x2F;JSX</h3></blockquote>
210
+ <p>ES6&#x2F;ES7&#x2F;JSX 转义需要 Babel 的依赖，支持装饰器。</p>
211
+ <pre><code>npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread
212
+ </code></pre>
213
+ <p>在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。</p>
214
+ <pre><code>module.exports= &#123;
215
+ //other code
216
+ module: &#123;
217
+ rules: [
218
+ &#123;
219
+ test:/\.jsx?$/,
220
+ use: [
221
+ &#123;
222
+ loader:&#39;babel-loader&#39;,
223
+ options: &#123;
224
+ presets: [&#39;@babel/preset-env&#39;, &#39;@babel/react&#39;],
225
+ plugins: [
226
+ [require(&quot;@babel/plugin-proposal-decorators&quot;), &#123; &quot;legacy&quot;:true &#125;]
227
+ ]
228
+ &#125;
229
+ &#125;
230
+ ],
231
+ include:path.resolve(__dirname, &#39;src&#39;),
232
+ exclude:/node_modules/
233
+ &#125;,
234
+ ]
235
+ &#125;
236
+ &#125;
237
+ </code></pre>
238
+ <blockquote>
239
+ <h3 id="8-压缩JS文件"><a href="#8-压缩JS文件" class="headerlink" title="8.压缩JS文件"></a>8.压缩JS文件</h3></blockquote>
240
+ <p>安装依赖:</p>
241
+ <pre><code>npm install --save-dev uglifyjs-webpack-plugin
242
+ npm install --save-dev optimize-css-assets-webpack-plugin
243
+ </code></pre>
244
+ <p>在 webpack.config.js 中增加 optimization 的配置</p>
245
+ <pre><code>constUglifyWebpackPlugin=require(&#39;uglifyjs-webpack-plugin&#39;);
246
+
247
+ module.exports= &#123;
248
+ //other code
249
+ optimization: &#123;
250
+ minimizer: [
251
+ newUglifyWebpackPlugin(&#123;
252
+ parallel:4
253
+ &#125;)
254
+ ]
255
+ &#125;
256
+ &#125;
257
+ </code></pre>
258
+ <blockquote>
259
+ <h3 id="9-分离CSS-如果CSS文件较大的话"><a href="#9-分离CSS-如果CSS文件较大的话" class="headerlink" title="9.分离CSS(如果CSS文件较大的话)"></a>9.分离CSS(如果CSS文件较大的话)</h3></blockquote>
260
+ <p>因为CSS的下载和JS可以并行，当一个HTML文件很大的时候，可以把CSS单独提取出来加载</p>
261
+ <pre><code>npm install --save-dev mini-css-extract-plugin
262
+ </code></pre>
263
+ <p>在 webpack.config.js 中增加 plugins 的配置,并且将 ‘style-loader’ 修改为 { loader: MiniCssExtractPlugin.loader}。</p>
264
+ <p>CSS打包在单独目录，那么配置filename。</p>
265
+ <pre><code>constMiniCssExtractPlugin=require(&#39;mini-css-extract-plugin&#39;);
266
+
267
+ module.exports= &#123;
268
+ //other code
269
+ module: &#123;
270
+ rules: [
271
+ &#123;
272
+ test:/\.css/,
273
+ use: [&#123; loader:MiniCssExtractPlugin.loader&#125;, &#39;css-loader&#39;],
274
+ exclude:/node_modules/,
275
+ include:path.resolve(__dirname, &#39;src&#39;)
276
+ &#125;,
277
+ &#123;
278
+ test:/\.less/,
279
+ use: [&#123; loader:MiniCssExtractPlugin.loader &#125;, &#39;css-loader&#39;, &#39;less-loader&#39;],
280
+ exclude:/node_modules/,
281
+ include:path.resolve(__dirname, &#39;src&#39;)
282
+ &#125;,
283
+ &#123;
284
+ test:/\.scss/,
285
+ use: [&#123; loader:MiniCssExtractPlugin.loader &#125;, &#39;css-loader&#39;, &#39;sass-loader&#39;],
286
+ exclude:/node_modules/,
287
+ include:path.resolve(__dirname, &#39;src&#39;)
288
+ &#125;,
289
+ ]
290
+ &#125;,
291
+ plugins: [
292
+ newMiniCssExtractPlugin(&#123;
293
+ filename:&#39;css/[name].css&#39;
294
+ &#125;)
295
+ ]
296
+ &#125;
297
+ </code></pre>
298
+ <blockquote>
299
+ <h3 id="10-压缩CSS文件"><a href="#10-压缩CSS文件" class="headerlink" title="10.压缩CSS文件"></a>10.压缩CSS文件</h3></blockquote>
300
+ <p>安装依赖:</p>
301
+ <pre><code>npm install --save-dev optimize-css-assets-webpack-plugin
302
+ </code></pre>
303
+ <p>在 webpack.config.js 中的 optimization 中增加配置</p>
304
+ <pre><code>constOptimizeCssAssetsWebpackPlugin=require(&#39;optimize-css-assets-webpack-plugin&#39;);
305
+
306
+ module.exports= &#123;
307
+ //other code
308
+ optimization: &#123;
309
+ minimizer: [
310
+ newOptimizeCssAssetsWebpackPlugin()
311
+ ]
312
+ &#125;
313
+ &#125;
314
+ </code></pre>
315
+ <blockquote>
316
+ <h3 id="11-打包前先清空输出目录"><a href="#11-打包前先清空输出目录" class="headerlink" title="11.打包前先清空输出目录"></a>11.打包前先清空输出目录</h3></blockquote>
317
+ <pre><code>npm install --save-dev clean-webpack-plugin
318
+ </code></pre>
319
+ <p>在 webpack.config.js 中增加 plugins 的配置</p>
320
+ <pre><code>constCleanWebpackPlugin=require(&#39;clean-webpack-plugin&#39;);
321
+
322
+ module.exports= &#123;
323
+ //other code
324
+ plugins: [
325
+ newCleanWebpackPlugin()
326
+ ]
327
+ &#125;
328
+ </code></pre>
329
+ <p>至此，webpack配置已经基本能满足需求。</p>
330
+ <blockquote>
331
+ <h3 id="完整webpack-config-js和package-json文件"><a href="#完整webpack-config-js和package-json文件" class="headerlink" title="完整webpack.config.js和package.json文件"></a>完整webpack.config.js和package.json文件</h3></blockquote>
332
+ <p>webpack.config.js文件:</p>
333
+ <pre><code>constpath=require(&#39;path&#39;);
334
+ consthtmlWebpackPlugin=require(&#39;html-webpack-plugin&#39;);
335
+ constUglifyWebpackPlugin=require(&#39;uglifyjs-webpack-plugin&#39;);
336
+ constMiniCssExtractPlugin=require(&#39;mini-css-extract-plugin&#39;);
337
+ constCleanWebpackPlugin=require(&#39;clean-webpack-plugin&#39;);
338
+ constOptimizeCssAssetsWebpackPlugin=require(&#39;optimize-css-assets-webpack-plugin&#39;);
339
+ module.exports= &#123;
340
+ entry:path.resolve(__dirname, &#39;src/index.js&#39;),
341
+ output: &#123;
342
+ path:path.resolve(__dirname, &#39;dist&#39;),
343
+ filename:&#39;bundle.js&#39;,
344
+ publicPath:&#39;/&#39;
345
+ &#125;,
346
+ devServer: &#123;
347
+ contentBase:&#39;./dist&#39;,
348
+ port:&#39;8080&#39;,
349
+ host:&#39;localhost&#39;
350
+ &#125;,
351
+ module: &#123;
352
+ rules: [
353
+ &#123;
354
+ test:/\.jsx?$/,
355
+ use: [
356
+ &#123;
357
+ loader:&#39;babel-loader&#39;,
358
+ options: &#123;
359
+ presets: [&#39;@babel/preset-env&#39;, &#39;@babel/react&#39;],
360
+ plugins: [
361
+ [require(&quot;@babel/plugin-proposal-decorators&quot;), &#123; &quot;legacy&quot;:true &#125;]
362
+ ]
363
+ &#125;
364
+ &#125;
365
+ ],
366
+ include:path.resolve(__dirname, &#39;src&#39;),
367
+ exclude:/node_modules/
368
+ &#125;,
369
+ &#123;
370
+ test:/\.css/,
371
+ use: [&#123; loader:MiniCssExtractPlugin.loader&#125;, &#39;css-loader&#39;],
372
+ exclude:/node_modules/,
373
+ include:path.resolve(__dirname, &#39;src&#39;)
374
+ &#125;,
375
+ &#123;
376
+ test:/\.less/,
377
+ use: [&#123; loader:MiniCssExtractPlugin.loader &#125;, &#39;css-loader&#39;, &#39;less-loader&#39;],
378
+ exclude:/node_modules/,
379
+ include:path.resolve(__dirname, &#39;src&#39;)
380
+ &#125;,
381
+ &#123;
382
+ test:/\.scss/,
383
+ use: [&#123; loader:MiniCssExtractPlugin.loader &#125;, &#39;css-loader&#39;, &#39;sass-loader&#39;],
384
+ exclude:/node_modules/,
385
+ include:path.resolve(__dirname, &#39;src&#39;)
386
+ &#125;,
387
+ &#123;
388
+ test:/\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
389
+ use: [
390
+ &#123;
391
+ loader:&#39;url-loader&#39;,
392
+ options: &#123;
393
+ limit:1024,
394
+ outputPath:&#39;images&#39;
395
+ &#125;
396
+ &#125;
397
+ ]
398
+ &#125;
399
+ ]
400
+ &#125;,
401
+ optimization: &#123;
402
+ minimizer: [
403
+ newUglifyWebpackPlugin(&#123;
404
+ parallel:4
405
+ &#125;),
406
+ newOptimizeCssAssetsWebpackPlugin()
407
+ ]
408
+ &#125;,
409
+ plugins: [
410
+ newhtmlWebpackPlugin(&#123;
411
+ template:path.resolve(__dirname, &#39;src/index.html&#39;),
412
+ &#125;),
413
+ newMiniCssExtractPlugin(&#123;
414
+ filename:&#39;css/[name].css&#39;
415
+ &#125;),
416
+ newCleanWebpackPlugin()
417
+ ]
418
+ &#125;
419
+ </code></pre>
420
+ <p>package.json文件:</p>
421
+ <pre><code>&#123;
422
+ &quot;name&quot;: &quot;webpk&quot;,
423
+ &quot;version&quot;: &quot;1.0.0&quot;,
424
+ &quot;description&quot;: &quot;&quot;,
425
+ &quot;main&quot;: &quot;webpack.config.js&quot;,
426
+ &quot;scripts&quot;: &#123;
427
+ &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
428
+ &quot;build&quot;: &quot;webpack --mode production&quot;,
429
+ &quot;dev&quot;: &quot;webpack-dev-server --mode development&quot;
430
+ &#125;,
431
+ &quot;keywords&quot;: [],
432
+ &quot;author&quot;: &quot;&quot;,
433
+ &quot;license&quot;: &quot;ISC&quot;,
434
+ &quot;devDependencies&quot;: &#123;
435
+ &quot;@babel/core&quot;: &quot;^7.4.0&quot;,
436
+ &quot;@babel/plugin-proposal-decorators&quot;: &quot;^7.4.0&quot;,
437
+ &quot;@babel/plugin-proposal-object-rest-spread&quot;: &quot;^7.4.0&quot;,
438
+ &quot;@babel/preset-env&quot;: &quot;^7.4.1&quot;,
439
+ &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
440
+ &quot;babel-loader&quot;: &quot;^8.0.5&quot;,
441
+ &quot;clean-webpack-plugin&quot;: &quot;^2.0.1&quot;,
442
+ &quot;css-loader&quot;: &quot;^2.1.1&quot;,
443
+ &quot;file-loader&quot;: &quot;^3.0.1&quot;,
444
+ &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
445
+ &quot;less&quot;: &quot;^3.9.0&quot;,
446
+ &quot;less-loader&quot;: &quot;^4.1.0&quot;,
447
+ &quot;mini-css-extract-plugin&quot;: &quot;^0.5.0&quot;,
448
+ &quot;node-sass&quot;: &quot;^4.11.0&quot;,
449
+ &quot;optimize-css-assets-webpack-plugin&quot;: &quot;^5.0.1&quot;,
450
+ &quot;sass-loader&quot;: &quot;^7.1.0&quot;,
451
+ &quot;style-loader&quot;: &quot;^0.23.1&quot;,
452
+ &quot;uglifyjs-webpack-plugin&quot;: &quot;^2.1.2&quot;,
453
+ &quot;url-loader&quot;: &quot;^1.1.2&quot;,
454
+ &quot;webpack&quot;: &quot;^4.29.6&quot;,
455
+ &quot;webpack-cli&quot;: &quot;^3.3.0&quot;,
456
+ &quot;webpack-dev-server&quot;: &quot;^3.2.1&quot;
457
+ &#125;,
458
+ &quot;dependencies&quot;: &#123;
459
+ &quot;react&quot;: &quot;^16.8.4&quot;,
460
+ &quot;react-dom&quot;: &quot;^16.8.4&quot;,
461
+ &quot;react-redux&quot;: &quot;^6.0.1&quot;,
462
+ &quot;redux&quot;: &quot;^4.0.1&quot;
463
+ &#125;
464
+ &#125;
465
+ </code></pre>
466
+ <p>更多loader和plugin的参数可以参考:<br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/">https://www.webpackjs.com/loaders/</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/plugins/">https://www.webpackjs.com/plugins/</a></p>
467
+ <p>如果你有其它的webpack配置需求，欢迎留言~</p>
468
+ </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/46911.html">https://xuehuayu.cn/article/46911.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/39937.html">Webpack 5 升级实验</a><a class="next" href="/article/20635.html">React服务端渲染框架Next.js入门(共12集)</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
469
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
470
+ const locale = {
471
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
472
+ sofa: '沙发空缺中，还不快抢~',
473
+ };
474
+ Waline.init({
475
+ el: '#vcomment',
476
+ serverURL: serverURL,
477
+ pageSize: '20',
478
+ visitor: true, // 阅读量统计
479
+ requiredMeta: ['nick', 'mail'],
480
+ emoji: [
481
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
482
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
483
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
484
+ ],
485
+ locale,
486
+ pageview: true
487
+ })
488
+ </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() {
489
+ var val = $(this).val()
490
+ 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>'
491
+ 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>'
492
+ 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>'
493
+
494
+ if (val === 'self') {
495
+ $('#search').html(self)
496
+ var search_path = 'search.xml';
497
+ if (search_path.length == 0) {
498
+ search_path = 'search.xml';
499
+ }
500
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
501
+ searchFunc(path, 'local-search-input', 'local-search-result');
502
+ } else if (val === 'baidu') {
503
+ $('#search').html(baidu)
504
+ } else if (val === 'google') {
505
+ $('#search').html(google)
506
+ }
507
+ })</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(){
508
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
509
+ if (cnb) {
510
+ var gxba =document.getElementById('gxba')
511
+ var gaba =document.getElementById('gaba')
512
+ var gabaLink =document.getElementById('gaba-link')
513
+ gxba.innerText ='京ICP备20007647号-1'
514
+ gaba.innerText ='京公网安备 11010802031254号'
515
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
516
+ }
517
+ })()</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>