-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1065 lines (414 loc) · 42.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.3">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.3">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.3">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.3" color="#222">
<meta name="keywords" content="Hexo, NexT" />
<meta property="og:type" content="website">
<meta property="og:title" content="高某人的闲言碎语">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="高某人的闲言碎语">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="高某人的闲言碎语">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
version: '5.1.3',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title>高某人的闲言碎语</title>
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c969ca1ce2948b98c05d061b665bc156";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">高某人的闲言碎语</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories/" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/19/react-router和react-redux的权限认证/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="GravityMsc">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/F1.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="高某人的闲言碎语">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/12/19/react-router和react-redux的权限认证/" itemprop="url">react-router和react-redux的权限认证</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-19T16:42:21+08:00">
2017-12-19
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/前端/" itemprop="url" rel="index">
<span itemprop="name">前端</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote>
<p>在前后端分离的情况下，路由由前端管理并控制，权限控制就成为了一个不可避免的问题</p>
</blockquote>
<h3 id="登录校验"><a href="#登录校验" class="headerlink" title="登录校验"></a>登录校验</h3><p> 就token验证来说，接口请求和路由控制都需要做出判定。由于react-router V4的组件化思想，取消了路由组件本身的钩子，例如: onEnter, onLeave 等，取而代之的是route组件的render函数或者是react组件的生命周期函数。下面分别用两种例子来实现路由的权限控制： </p>
<p> 首先看官方示例，无状态组件作为函数，截取其核心部分：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const AuthRoute = ({component: Component, ...rest}) => (</span><br><span class="line"> <Route {...rest} render={(props) => (</span><br><span class="line"> AuthFunction.isLogin ? <Component {...props} /> : </span><br><span class="line"> <Redirect to={{</span><br><span class="line"> pathname: '/login',</span><br><span class="line"> state: {from: props.location}</span><br><span class="line"> }} /></span><br><span class="line"> )} /></span><br><span class="line">);</span><br></pre></td></tr></table></figure></p>
<p> 其次是react标准高阶组件形式，可扩展性更强，本质无区别：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">const withAuth = Component => (</span><br><span class="line"> class extends React.Component {</span><br><span class="line"> <!-- some operation --></span><br><span class="line"> render() {</span><br><span class="line"> return (</span><br><span class="line"> AuthFunction.isLogin ? <Component {...this.props} {...newProps} /> : </span><br><span class="line"> <Loading tips="请登录..." /></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">);</span><br><span class="line"><Route path="/private" exact component={withAuth(MainPage)} /></span><br></pre></td></tr></table></figure></p>
<h3 id="登录状态保存"><a href="#登录状态保存" class="headerlink" title="登录状态保存"></a>登录状态保存</h3><p> redux的状态管理，存储在内存中，在页面刷新后就会出现登录状态丢失，导致需要重新登录的情况。目前的处理措施分为两步： </p>
<ul>
<li>在登录组件登录成功后把必要信息存储在localStroage或者sessionStorage中，做持久化保存。</li>
<li><p>在根组件初始化加载过程中，通过redux dispatch,获取所存信息并保存在redux中，以便之后调用（在已有的fetch、axios之上做封装，每次执行拉取所存状态信息，与发送的实际参数合并，完成接口请求）</p>
<p>对于单点登录，主要则参考掘金的这篇文章<a href="https://juejin.im/post/5a002b536fb9a045132a1727" target="_blank" rel="noopener">《前端需要了解的 SSO 与 CAS 知识》</a></p>
</li>
</ul>
<h3 id="browserRouter、hashRouter"><a href="#browserRouter、hashRouter" class="headerlink" title="browserRouter、hashRouter"></a>browserRouter、hashRouter</h3><p> 单页应用下，路由路径可以看作为状态信息。<br> 若使用browserRouter，在后端未做特殊处理时，刷新页面因服务器寻找指定路径资源文件导致404错误。单页应用下，需要我们对后端加以限制。在请求其他路径资源失败时默认返回首页文件（多指index.html），以满足单页应用的路由选择；与此相对，hashRouter的优势在于不用对后端进行限制，路径以’#’分隔。在一些特殊情况下，我们可以利用history提供的监听函数，以便根据location决定当前情况下的一些状态变化。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">添加监听：</span><br><span class="line">this.listenHistory = history.listen((location) => {</span><br><span class="line"> const selectedKey = location.pathname.split('/')[1];</span><br><span class="line"> this.setState(() => ({</span><br><span class="line"> current: selectedKey || 'jobMonitor',</span><br><span class="line"> }));</span><br><span class="line">});</span><br><span class="line">解除监听：</span><br><span class="line">this.listenHistory();</span><br></pre></td></tr></table></figure></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/08/正好有点空，随便说说/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="GravityMsc">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/F1.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="高某人的闲言碎语">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/12/08/正好有点空，随便说说/" itemprop="url">正好有点空，随便说说</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-08T16:16:18+08:00">
2017-12-08
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/杂谈/" itemprop="url" rel="index">
<span itemprop="name">杂谈</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="关于这个博客（呃…大概算是"><a href="#关于这个博客（呃…大概算是" class="headerlink" title="关于这个博客（呃…大概算是"></a>关于这个博客（呃…大概算是</h3><p>一直以来都没什么总结文字之类的保存下来，但随着需要掌握的东西越来越多，而且有些东西使用的频率并不高。单靠着翻阅以前项目代码来回忆明显效率太慢，而且十分混乱。于是就有建立个博客的想法。 </p>
<p>本来一开始是想自己写一个完整的前后端项目，尽管这可以促进一下自己的nodejs的学习，但边写编发现这和自己的初衷离得太远。在借助 <code>koa-markdown</code> 写了点笔记之后，下定决心借助 ‘hexo + pages.github.io’ 一步解毒，就有了这么个东西······</p>
<h3 id="github项目"><a href="#github项目" class="headerlink" title="github项目"></a>github项目</h3><p>在时间久远的过去，靠着自己对前端的兴趣（当然也是大势所趋），自学 react 全家桶······在此之前，本着 ‘用别人的配置很不爽’ 的心态，先把 webpack 多数主流配置搞懂搞明白，写了个自用的配置文件，然后随时保证升级，添加不同的plugin。遗憾的就是自己仅仅是了解了一下，并没有去写一个自己的插件出来；紧接着用 airbnb 的代码规范检查折磨自己，也算是规范一下自己的代码。之后就是老生常谈，借助 react,redux,react-router ，以 antd 为基础组件库，完成了一个内部的小型单页应用，把各部分串联在一起。在此说一句，每一个新技术的学习，只有靠自己去踩坑才能掌握的更好。react-router v4 的学习与使用，真是累感不爱/(ㄒoㄒ)/~~ </p>
<p>最近在完成了公司一个老旧的项目后，用着一些上古的东西更让人觉得痛不欲生，兴趣也越来越低。自己想着主动做出改变，去参与一些开源项目，跟上技术发展的趋势。于是拾起自己一直懒于经营的github，通过与 owner 的交流和 code review, 提升自己的水平。思来想去，决定先从 DOTA2 入手，于是 <a href="https://github.com/odota/web" target="_blank" rel="noopener">opendota</a> 就成了我第一个试水的项目。 </p>
<p>当然十分感谢<a href="https://github.com/geeeeeeeeek/git-recipes/wiki" target="_blank" rel="noopener">Git中文教程</a>的指引。首先从翻译入手，熟悉整个的开源流程。因为本身 opendota 的项目完全是react全家桶，一些feature的实现并没有遇到什么困难，于是DOTA2新的奖章等级系统就成了我的功能代码层面上的第一个贡献（笑）。 </p>
<p>在此补一句，英语在任何时候的确会成为自身提高的一定阻碍。沟通过程中看懂当然是没问题，但是对某些issue上理解的偏差还是存在的。很久不用的英语已经退化，为了在issue和pr上不出现一些可笑的语法错误，靠着谷歌翻译就是必不可少的了···要想作为一个合格的码农，最好还是去学好英语，不只是沟通，看原版教程的理解也比加过一层翻译来的更清楚。</p>
<h3 id="后续计划"><a href="#后续计划" class="headerlink" title="后续计划"></a>后续计划</h3><p>大概，先是要把react全家桶的一些使用tips汇总一下，譬如redux，react-router等。在写的过程中去调研正确与否，更能加深对技术的掌握程度。之后也会补上 ‘hexo + pages.github.io’ 的简单使用教程。<br>其二，开源项目保持贡献吧，多学习源码，了解整个项目的构成。代码永远是最好的老师。<br>其三，正如这个博客标题，’闲言碎语’。去谈谈一些其他事情的看法与分析，类似知乎回答那种······ </p>
<p>呃，也快要下班了，大周五的和同事一起去吃火锅了······回见！</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/05/webpack学习笔记/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="GravityMsc">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/F1.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="高某人的闲言碎语">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/12/05/webpack学习笔记/" itemprop="url">webpack学习笔记</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-05T17:35:45+08:00">
2017-12-05
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/前端/" itemprop="url" rel="index">
<span itemprop="name">前端</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="entry-amp-output"><a href="#entry-amp-output" class="headerlink" title="entry&output"></a>entry&output</h3><p>我们以一个最简单的配置为例：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">entry: {</span><br><span class="line"> index:'./src/index.js',</span><br><span class="line">},</span><br><span class="line">output:{</span><br><span class="line"> path: __dirname + '/dist',</span><br><span class="line"> filename: '[name]__[chunkHash:8].js',</span><br><span class="line"> chunkFilename: "[name]__[chunkHash:5]_chunk.js",</span><br><span class="line"> publicPath: '/',</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>首先看entry部分，该参数由若干键值对键值对构成，其中value部分可以传递数组，如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vendors:['react',react-dom]</span><br></pre></td></tr></table></figure></p>
<p>大多数简单情况下，可以对entry配置两组键值对，其中一组为入口函数，另一组为所依赖的库文件，以便之后用webpack的插件 <code>CommonsChunkPlugin</code> 优化。 </p>
<p>output结构与entry相似：</p>
<ul>
<li>path：这里的路径为webpack打包输出后的目录。其中 <code>__dirname</code> 属于关键字，可以用 <code>path</code> 这个包来替代。</li>
<li>filename：打包输出文件。 <code>[name]</code> 继承entry中key值，如 <code>index</code> , <code>vendors</code> 等作为输出文件名。<br><code>[chunkhash]</code> 为该文件所含js模块的hash编码，有别于 <code>[hash]</code> 。hash为每次打包后生成的hash码，每当运行webpack时，所有文件重新编译，此hash重新生成，造成打包缓慢。<br>chunkhash为该JS模块的hash码，当编码过程中所修改的部分不涉及其他JS块时，其所对应的chunkhash不会改变，不会重复打包，故用此为好。</li>
<li><p>chunkFilename：模块输出文件名。应用在js文件存在异步加载模块中，以使 用最多的 <code>require.ensure</code> 为例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">require.ensure([], (require) => {</span><br><span class="line"> const { tip } = require('../common/messageTip');</span><br><span class="line"> tip('require.ensure has been used');</span><br><span class="line">}, 'messageChunk');</span><br></pre></td></tr></table></figure>
<p><code>require.ensure</code> 为异步加载JS代码，只有当执行时才进行获取指定JS文件。我们没有必要在首页加载时进行请求。webpack识别后抽取该代码块，会根据 <code>chunkFilename</code> 生成相应文件以便之后调用。</p>
</li>
<li>publicPath：文件引用路径。与之后 <code>HtmlwebpackPlugin</code> 紧密相关，当插件把打包后生成的文件路径插入html中，采取的是此路径。同时，当文件资源分开部署时，你也可以传递url对其引用。</li>
</ul>
<h3 id="module"><a href="#module" class="headerlink" title="module"></a>module</h3><p>module中配置各种loader，对源代码进行编译打包。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">module: {</span><br><span class="line"> rules: [{</span><br><span class="line"> test: /\.jsx?$/,</span><br><span class="line"> exclude: /node_modules/,</span><br><span class="line"> loader: 'babel-loader',</span><br><span class="line"> }, {</span><br><span class="line"> test: /\.css$/,</span><br><span class="line"> use: ['style-loader', 'css-loader', 'postcss-loader'],</span><br><span class="line"> }, {</span><br><span class="line"> test: /\.less$/,</span><br><span class="line"> use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],</span><br><span class="line"> }, {</span><br><span class="line"> test: /\.(png|jpe?g|gif)(\?.+)?$/,</span><br><span class="line"> loader: 'url-loader?name=image/[name].[hash:12].[ext]&limit=10000',</span><br><span class="line"> }, {</span><br><span class="line"> test: /\.(ttf|eot|svg|woff|woff2)(\?.+)?$/,</span><br><span class="line"> loader: 'file-loader?name=font/[name].[hash:12].[ext]',</span><br><span class="line"> }],</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>对每个loader的作用做一个简单的阐述：</p>
<ul>
<li><p><code>babel-loader</code><br>利用babel对es6（及以上）代码进行编译，生成浏览器可运行的js代码。所有规则在根目录下的 <code>.babelrc</code> 文件中。如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> "presets": [</span><br><span class="line"> [</span><br><span class="line"> "env",</span><br><span class="line"> {</span><br><span class="line"> "targets": {</span><br><span class="line"> "browsers": [</span><br><span class="line"> "last 2 versions",</span><br><span class="line"> "ie >= 9"</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> "modules": false,</span><br><span class="line"> "useBuiltIns": true</span><br><span class="line"> }</span><br><span class="line"> ],</span><br><span class="line"> "stage-2",</span><br><span class="line"> "react"</span><br><span class="line"> ],</span><br><span class="line"> "plugins": [</span><br><span class="line"> "react-hot-loader/babel"</span><br><span class="line"> ] //Enables React code to work with HMR.</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>我们使用了 <code>babel-preset-env/react/stage-2</code> 作为额外规则。<br><a href="https://github.com/babel/babel-preset-env" target="_blank" rel="noopener">babel-preset-env</a> 作为新的preset，包括但不仅限于es2015的作用。</p>
<blockquote>
<p> A Babel preset that can automatically determine the Babel plugins and polyfills you need based on your supported environments.</p>
</blockquote>
</li>
<li><p><code>style-loader&css-loader&postcss-loader</code><br>其中，<code>style-loader</code>和<code>css-loader</code>主要完成的功能是读取在js引用的css模块，之后插入输出页面中作为link。<br><code>postcss-loader</code>作为前置，主要完成对所书写的css样式的再处理，添加各种浏览器兼容配置等，配置文件为 <code>postcss.config.js</code>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">module.exports = {</span><br><span class="line"> plugins: [</span><br><span class="line"> require('autoprefixer')({</span><br><span class="line"> 'browserslist': ['last 2 versions', 'ie>=9'],</span><br><span class="line"> }),</span><br><span class="line"> ],</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<p><code>autoprefixer</code>为自带依赖，当然也可以执行npm install并记录在dev中。<br><code>less-loader</code>作为css预处理，不再细说。 </p>
</li>
<li><p><code>url-loader&file-loader</code><br>两者功能作用大体相同。在这里，<code>url-loader</code>把在limit大小(KB)限制之内的图片转成base64编码插入相应位置，超过此大小的图片重新命名，打包到output指定目录下。同时插入hash码进行缓存控制。（有别于传统img标签内的src链接，<code>url-loader</code> 需要识别 <code>import</code> 引入的文件）。<br><code>file-loader</code> 与之类似，在此用作字体等文件的加载。</p>
<h3 id="plugin"><a href="#plugin" class="headerlink" title="plugin"></a>plugin</h3><p>配置打包所需各种插件，自动化或优化某些过程。目前所用到配置如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">plugins: [</span><br><span class="line"> new webpack.optimize.ModuleConcatenationPlugin(),</span><br><span class="line"> new webpack.optimize.CommonsChunkPlugin({</span><br><span class="line"> name: 'vendors',</span><br><span class="line"> filename: 'common.js',</span><br><span class="line"> minChunks: Infinity,</span><br><span class="line"> }),</span><br><span class="line"> new webpack.optimize.CommonsChunkPlugin({</span><br><span class="line"> async: true,</span><br><span class="line"> children: true,</span><br><span class="line"> minChunks: 3,</span><br><span class="line"> }),</span><br><span class="line"> new webpack.HotModuleReplacementPlugin(),</span><br><span class="line"> new webpack.NamedModulesPlugin(),</span><br><span class="line"> new HtmlwebpackPlugin({</span><br><span class="line"> template: './src/index_tpl.html',</span><br><span class="line"> filename: 'index.html',</span><br><span class="line"> inject: true,</span><br><span class="line"> hash: true,</span><br><span class="line"> }),</span><br><span class="line"> new webpack.DefinePlugin({</span><br><span class="line"> 'process.env': {</span><br><span class="line"> 'NODE_ENV': JSON.stringify('dev'),</span><br><span class="line"> },</span><br><span class="line"> }),</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>CommonsChunkPlugin</code> 提取公共模块插件。第一项配置多数是把在entry所依赖的库文件提取出来并重新命名。因为为所依赖的package,稳定性高，不常变化，所以不加入hash码，提取出来不必每次重新打包。第二项配置是把所有子chunk的公共依赖（引用次数大于minChunks）提取打包。当使用相应子chunk模块时，它将自动并行下载所打包的公共依赖。(<a href="https://github.com/webpack/webpack/issues/5386" target="_blank" rel="noopener">帮助范例</a>)</p>
</li>
<li><code>HotModuleReplacementPlugin</code> webpack HMR 插件配置。就React来说，配合react-hot-loader实现热替换，做到不重新刷新，完成对页面部分结构的替代更新。</li>
<li><code>NamedModulesPlugin</code> 显示模块的相对路径，开发环境下方便调试。</li>
<li><code>HtmlwebpackPlugin</code> 针对打包后的JS文件，插入到html模板中，完成最后一步的自动化构建。插件默认支持ejs(pug)、html文件格式，其中，inject参数可选，head或者true(等同于body)。默认插入所有output的JS文件；多页情况下，配置chunks参数进行不同页面下的JS引入。</li>
<li><code>DefinePlugin</code> 定义变量，完成对生产环境、开发环境下的区分。</li>
</ul>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
</section>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<section class="site-overview-wrap sidebar-panel sidebar-panel-active">
<div class="site-overview">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image"
src="/images/F1.jpg"
alt="GravityMsc" />
<p class="site-author-name" itemprop="name">GravityMsc</p>
<p class="site-description motion-element" itemprop="description"></p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">3</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/index.html">
<span class="site-state-item-count">2</span>
<span class="site-state-item-name">分类</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/index.html">
<span class="site-state-item-count">5</span>
<span class="site-state-item-name">标签</span>
</a>
</div>
</nav>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/GravityMsc" target="_blank" title="github">
<i class="fa fa-fw fa-github"></i>github</a>
</span>
<span class="links-of-author-item">
<a href="https://weibo.com/mscgravity" target="_blank" title="weibo">
<i class="fa fa-fw fa-weibo"></i>weibo</a>
</span>
<span class="links-of-author-item">
<a href="https://www.zhihu.com/people/GravityMsc/activities" target="_blank" title="zhihu">
<i class="fa fa-fw fa-globe"></i>zhihu</a>
</span>
<span class="links-of-author-item">
<a href="https://twitter.com/GravityMsc" target="_blank" title="twitter">
<i class="fa fa-fw fa-twitter"></i>twitter</a>
</span>
</div>
</div>
</section>
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright">© <span itemprop="copyrightYear">2017</span>
<span class="with-love">
<i class="fa fa-user"></i>
</span>
<span class="author" itemprop="copyrightHolder">GravityMsc</span>
</div>
<div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>
<span class="post-meta-divider">|</span>
<div class="theme-info">主题 — <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.3</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.1.3"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.1.3"></script>
<script type="text/javascript" src="/js/src/affix.js?v=5.1.3"></script>
<script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.3"></script>