From 7588b6e2b02b41879847e0e30322ffc4dae33c40 Mon Sep 17 00:00:00 2001 From: chaos Date: Thu, 6 Jun 2019 16:37:51 +0800 Subject: [PATCH] Optimizing Pro Config --- dist/app-e94b2ec.css | 1 + dist/app-e94b2ec.js | 1 + dist/assets/logo-4e9b7ef.png | Bin 0 -> 8738 bytes dist/index.html | 1 + package.json | 15 ++- src/views/app.js | 17 ++- webpack.dev.js | 193 +++++++++++++++++++---------------- webpack.pro.js | 123 +++++++++++++--------- 8 files changed, 200 insertions(+), 151 deletions(-) create mode 100644 dist/app-e94b2ec.css create mode 100644 dist/app-e94b2ec.js create mode 100644 dist/assets/logo-4e9b7ef.png create mode 100644 dist/index.html diff --git a/dist/app-e94b2ec.css b/dist/app-e94b2ec.css new file mode 100644 index 0000000..6d079fd --- /dev/null +++ b/dist/app-e94b2ec.css @@ -0,0 +1 @@ +#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:120px} \ No newline at end of file diff --git a/dist/app-e94b2ec.js b/dist/app-e94b2ec.js new file mode 100644 index 0000000..ea70790 --- /dev/null +++ b/dist/app-e94b2ec.js @@ -0,0 +1 @@ +!function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=4)}([function(e,t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var r;r=function(){return this}();try{r=r||new Function("return this")()}catch(e){"object"===("undefined"==typeof window?"undefined":n(window))&&(r=window)}e.exports=r},function(e,t,n){"use strict";n.d(t,"b",function(){return r}),n.d(t,"a",function(){return o});var r={"/index":n(3).a},o="/index"},function(D,e,t){(function(R,F){function q(e){return(q="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(){"use strict";function z(e,t,n,r,o,i){return{tag:e,key:t,attrs:n,children:r,text:o,dom:i,domSize:void 0,state:void 0,_state:void 0,events:void 0,instance:void 0,skip:!1}}z.normalize=function(e){return Array.isArray(e)?z("[",void 0,void 0,z.normalizeChildren(e),void 0,void 0):null!=e&&"object"!==q(e)?z("#",void 0,void 0,!1===e?"":e,void 0,void 0):e},z.normalizeChildren=function(e){for(var t=0;t=t.length-c.length||null==c&&r;d++,T(e,p,y,o,E(t,++f,i),m,l),r&&p.tag===y.tag&&C(e,k(p),i)}else{if((p=t[v])!==y||r)if(null==p)v--;else if(null==y)d++;else{if(p.key!==y.key)break;m=null!=c&&v>=t.length-c.length||null==c&&r;T(e,p,y,o,E(t,v+1,i),m,l),(r||d=t.length-c.length||null==c&&r;T(e,p,y,o,E(t,v+1,i),m,l),r&&p.tag===y.tag&&C(e,k(p),i),null!=p.dom&&(i=p.dom),v--,h--}else{if(s=s||S(t,v),null!=y){var g=s[y.key];if(null!=g){var w=t[g];m=null!=c&&g>=t.length-c.length||null==c&&r;T(e,w,y,o,E(t,v+1,i),r,l),C(e,k(w),i),t[g].skip=!0,null!=w.dom&&(i=w.dom)}else{i=x(e,y,o,l,i)}}h--}else v--,h--;if(hMj1y@6de%-MMMaKKDbML#~&*$(-!aaMfUDiIkti3igXwaZRg9Z&6G-%MEL4HVR1-bz5h0<_{1}Y2y z_O;mEL3ROl0eS*Ewe#L8U>&dwWEn(@1(_egT#(sNo(jwXY)<*;k~9n?U3LXCTCrm+ z_Arn`Xut8N#cGhrf_*VUCPMis;EfFBbvYUal8hcu`k)e>Y~f^JcxZ)yIRXzv$o)`$ z1Xvqdp<1S4Anq98NJYn5I0xtxTA>cu0QO;v{t3!|0ak}rsMcs0Nc9}3=;ap163-oK zjkN-IL_{|O&xBT{L4BZL&JxTMg4#NICV{yG=n=Yri%#PU(mp*vFBSMQuwQ6pGGvj3 z8zK4$jp0|jGz?^Gx`8=Qu>TJj6k3@aS!UrU5dD~VdAUJ_hJkFsoF>>G0sDv6Bp`2D zcEk0px_xiWCQV!BYML@N{TRLSsTJ5Rh)5R|s-D$dJ&=6pXzD zxkQn@EcS6=Q)q=k(N(`7qXhk5;Goco0P8Ey3ScAg%F>R+E+{($)T@R07QGaj9}cZZ z2)deqDCpM&z72HGN#-h$mjyc`f*Bw)p*(}wCFC7C_oeC!>jtx7htaMv~ut zj1~BCMD$H!BknSEB?H-2kUxMNpRt_9V4t$c6A(QKOajUo$PwT`(4!T`SU4KkI|Dhb zdC3x;4b0A1PJ^5oCFq+(OZCS zp)=UP9i!-PQf?5F!CXLoll!z$FlP$p>2%9Q9-tVjZ4IiVyC8o`u@Ni<{UUX>XJk$j zbY^;GWS*qhZvPD`^bq9Ulq!C`qSq4dNz@}fK(7>ZMM_5UJlUR}Y><#{g4~@_Wj{vO zaaP<-kUytXZqER{LuaVLwirckPvffr`c;a#DwQ#2tf23t)VVZ;&P{_>D0*WG#_lN3224^b+*d1QoZ0 z#(bk%-Ye*g1ZDjuuxIE@bSV<gnTGdoR+w}AKkw$U z(Aw7-9~5+>=TPg4(8|{%eFRF(e?lwXwa~BneMQXap*62*1i8nf;HT3#Bb_%Yn8!Wp>SY>V5pNFh?3GRp zt#}vZU_qNb>g%-7iq|BH-s)~3GCs84T^U7h@|cS}5nAtBq`$atL^acJB?-;0;&E&j zI3l#-+oO{qfvt@Sz_bB;7(}cV3iX_&;^dY&;}Z34vNBi#NF#* z9R&>;RKPEY`3R0t$_0K8yp@eU4IJ4J-*@OlPtZ?hqD{Twu`w6{!$a%cU@LYObdBR= z{khOe*8;u7IZ%L%3$1j6ZBg_FkI8!BuG}uz5X+oSeDzq>Sj=@9DbpYU5z+N@etT9M z^kbPQQ!jW7ujbL%i7hOGd7{>bSw;GSlt4c0@`AwaIQLQw^1@>O;P}S-fZZ}trVcpT zW6U}#w9*YaWM^^Q@C7qAw9>69%ojw_6CGcf4*VkvT^gjua}xFxxHdWXQGJ*1u+nHoNUYUz`9ISX^=VskGcF_v4>=&iZg{U5QT$X zelOU@8G;%jLLPVdy~R4Uhb$?Cfmp=p97lvq$V!(6Sx|o3?e|g`11ZEVw4jTC-K+h* zB^pdTw)LeC@$I!ei7%b(4W?)OcUc8Q(7Y1Z3@irTrv5f0g}BUj2TD-t8~>Z#5m*nh zu~G)>fDOPhV3nt=Zi23*`mm$c673M{5tbqtNRyyzs9u*%mZ%9Rck;U(p>!BTLlg#C z>|l_=#JAVF-o)ArybZEYuyZ1K4P*+GrvNi5|G$WI1NH+m9PEJ#2U=th*uB_d7*4DL zW`mt0$eajfL-Z=}BCw{T7X^JC7+S3$OEe64-BG{PaV?-M*cUfLolX13u^*Tt6+7C( zXka)*23orQM14UC=nuBPg~Q{NER_-JTCmRw@>GOQfaZyG(pWO2Hf-43% z*uuery}V*Hvjpym&~ecGq#&k46)34g8hBYjKy&UFc2$<=Wz~0EUtzqc;N8@d_inKx8KXL7LLtEmrOWB;1JO7 zfqlTDw?O$GI-f(e#eg|eh%N>>i9*y})%2}ARin_)Wn7UJMOfzDIkW;fQ35$tuy+YM z9rO!8uPWZ_4f-WPX9)IAkbk1KjKh~g1Rf7=AnN8~QZEb=xIxebihhUod)J*5{jQ)3 z1g--H=B#6AoKBWzMQ{VbG5%GZ(bvK^1)Zsf;Aogeo zqeUpe#7As@3G5$GhX%!Gp+!Cq<-ddw9>PHSDteuTmf=L+tOMqOEQM%^AWJL%zM6PW z)(hxsvAscif!%?4x4+(2+m-_JK~_VwMvyhYN@91C?!@KL+hY4v%3(+1xK%-hJ_5H! zM4!XoAIw*7t{frg?ZAK>WJSO$0xv}H5=4`MnfQk&-4z%HW~gF^TI>jr(G-73v>NOL zL0*lJX;7X@>;|&TBP|66Kxqg>!xV;Et2HV)%9Gm!!rl;-^sR8s-+j0v4T7-9(OAyc*=tO9nAR@;w9(cn3T)!(yBq2 z$KlyP_;G$Uh@#)m$~amcMX#k0UfCTZ=t~)v!|ECe17%JVuZ!hfdQJ`soy$%zivA*N z<7j0hKcl!qO#scX!)$rh*TB8&=Hr5H%DO>-`9$cPc0e~p@5swIS{cc06vK6>Jr2mJ z95#bFCr!mu>~+lPg1wC#hCfA$o74tT^cNOBp0{8N=PUYa3OU>|@6Sn4NwBwqIW?^W z(=w1_1bYWL^E;<1znY}99B|*>oNA0+ZkmZCojmGL$lA&!^Cw0X*v&A!%i2dQi_CfSW&PXT&R(9byPy_9#$qL(1|Bx_^l z8A3Q%D*D?biYt0Ot>!?AUgwxb@R&(JKSAduD2G*GItYbh&Jc8Ug7jw-cvIEAfy=#Z zk}!(?Pr|l#YtGr$&nHkgYJUgVoavetVXqBVK^{m@4l97etB`Y~B%0&NeT3U1>EUYN zm0%X_kjx_i^wW7|`d~rVCoqoBZztW};<&*G`n9|=y)Al84#v?!A|t6da|XbC%%jsA zvi;4}S|M|fR{CtO!7)cp8GUYPp6hR(x z)N^L%sp^*#7|APS87)Q88x!5>u7v0k>Ib9u{0zCzt=2;FaN#)zQ_-+3tdbI*DxyU3}QZsI+(l5sdhPZ8u1M;V)ez0%I`b{Hj& z`!(-Yewyx=4ca75^afa8Kr9k23m>hoGGWo#okKeLbz*zE}KQl~?1p zYS2gA*Zx-kjzO?p(NFm`Nb@Y&Y*aN#?3&`yILxIP=+i=XLFYK?RK`EF>IgyCd6dIi z(inLtdW&ZzT%17WO&&c^mOJZBg1+fd4lBv_Na$ce*Ldjl2AQqq=x5#akp~jW{8yhg zs^~A0=61NC%^n#}I&nVOBg5;-tTFm+Qh~WV8-2FY?Q?#*RkNz-j8{hj=AV-a7UXV^ za@b6gU>}~*NEVSo=z76C=FubEl2mRx>>^$P2jn60*`rZG9`&fF6{LQ}fR{(}bkdm< z?I!3_k9xY>SK#4(J(D>j2HA9@h8$3^R)$fA*;a zMQ=zT)79lAgyUp8m{Z)#O2+%i(y#kCg>}kMzR=(RSLm8=a~K*6f3G>4?*8{>^+~UGVL7&ebuub-oV*;H4%q; zbQD)_H#Kpd;F%|K%q+wi_KhGind%%G2a5YapFF&Yo$xr15dnibNw$|@p7bn#3+5wv ze}B-G4H4tB#sBGI&lGS@^SxZ)rn-` z22=&kyXz6{-?!rI^tOgDH~g3+y_m%3l6Tu);_egNZNk(P2KT5d^5}Mw>RGup%eTy5 zC){0*eZ(=y2} z_qvt~l#Xrnet%DYxYq3?%fne!;_P9toHqM3uCx73z>Z-u+nU4yqnAVJq*m!UuHu>J z!{xm?1fArPr&bFNqXc~;N%31sJjfRm0EITp-63;G1kn}=Ja^iV|fRsZ)>WjToB-RiAu!ZiQ@ z=)a|$fh2TG5Z$76Z}&TKJlhO>Aav%dV2oo~G)wX;tX~HDgwFWZxQz}J{oR&V1)bv7 zFt!?}7J=S^c{Zt$I6f-~>O7UP&&~uACn*+Vs*zY2y_I^FJzJj ze^y({rvQ`l6KP)r%K6FjrWxd=oMgReiB1F-p1@Q;tfl53@|$fSw6f2On3Nw4`6=<-Vw1Tu-ZD9B&ITtrGyK{B8zzFgEiE@!|42wQ%cweE%rhRxyMmG5_=a{8@PL( z2)cyodz~egsL0-{RbtK+>`#H60x9q&$XgJt2G$6&hS;}lC9%7C51_ln_5kvT~QvJ&9YQ-%!>PB~!3d=%^JH5h|^Io@t zP`<}vx(oJCp*1NI5#s8*R4ced+l&;quR<+P&^yAVSLrI$(`cbJE(iTKDX_`mg*r75 zsn^DkfVwOb!7b3pMg`V6ywHt&FQd)L4b0;Yav*HI8N+{b-f~Rekp>vE^e6$LnB8iwSmm4xO7y@AYf9fzpsSyy%AJG zky-@~05b~gV1+>z83=YD@lLMm1u~03W(#&!1hZm&%TtI?cs6&^$vJ-YrSONJd{7wb z@-c{DP6=eL%YKk`x5Ao0urn=;ss0T!0?Ly*_(23rsWf8RbSmA6d-W#bp1miOn&PjJ ztc2$E#H))dfi;z99r*6tnS)*4tdvFFVUeM3C8%>s@zGJ2&dgOvZ4ki>w=bz38Nu&5 z|7E*uVjHhmmno1Niao@!=d3sPk_xV!d-HT9E)19R9sO}Wrdtb$)46Sn9hH?PX=9Q1 zxxFE^vO?#=zPQCvUIWZgpbX*~?V)Ia<5HmfqTBD~2r|0HIAwZ*bu^H2&4e_n9&^0g z?`1NTi6nw`3Spzz;oaq{891Lc)>GVmUkgNzcb(h!1G{IUN;>R~^X*R2_O4;8 zVf19j7Zw6@q1F1XfK#LjLB=`?tp%RPEueyeo|Tm{$-B*0C-)#0w2eS|DGWWq2Ua9WaYZ40e-2+I%R=zpVV z-F-zYdbi^nqscAwjuQufby{V!=wGr@CKMiRv>D0|xBGttdBicw-dx;$ii*xIf^K#x z2Su+9t#n%yz1}@yVx~doLZE`qcPj_!$PrgRpUkNq3E!7_ zc5_D2-+1)G=Y-Z9%ve{w75#N+t&;|*RbBoF z@~}s}UFjlYXF=Dv3o&&T2-=+E(Gx8qpR?#~*-6m1J?iY-0J>&~IoG4kR^nP`ir(lU zXdZ5n>xxcE(Alo#py1uz0RYq*5Q0l=eq*`+e6?cV*i(Vp_`zyJbULnzNS3| zo$8_AEb8m)F;blO@YE`r=#tkx1zqb=_^(j?HCHu&xzM8wtfDt$t(k{QNz2#cf~V*$xpidy&-GVC5eB!tQsVH&2rxL4y zx(PI==pQ`G;Z@Rg<>(`R^A4-%?^DzxG{ePj3ShyUovJ2+JmA?lW>D;7sV?*rbctU% z$latftWiPk^{k7f)K6XPD(E!Ny2!*eYJhlb9>$M(j=H&5#9ZXrIIW`pKdE#@ul1E* zM-%fM1%1)8999AE%}6i(yl>?Q@^@+@&{}6mg0HCsy~g^%A=1>F-YlH}b29C*D=R}`;TiLAIHD{&M#w3}KR2uNjv_CiNuIR6lm9acb z*z+lAu)FwA$Xhz1uY^!s1o?Ba3e?xB{n%Rl1f7$xvv{1XJB!^s&QrI2W&^tfDwDJr zCho_F+jc;=lf%4Ydo&5=xr7zD3e0(-GLRA@#B*1>)iZ}UOz0tk&P|xsJJh_xsJTGA zw-vT@JQFB@PvGv!dr-BC{=5j8@uzgGcpMLC^Q;#4U=eMf^}vThmqr4b6ul*BdlGae z1scK+5%jGTGBpV}Fmz`8G3SVv^I®nkKsE`8Z>T#~bql#3O( z&INO}xJS|H$T$igUFRT4XSh{)WE^lv=uEj|E))r!&m!=87L%=A(!lhbg5Kh3I!=|2do`@JNI_3gt(D zw=h{p7rg=i!6FR zH0N^JXx`)aJp}m;$VoZMoCkKgAk!jv9dsHr&jMCd9^1jY-H82}_60Lcu|q9(D9AA4 zpxsv-0_;pN$MspT5?EIGb4wZYsyt~${z$?a3s*t( zGdk|jQYYj}&_F?M0y#0D4h;&Az29O#1I!B{J>>D%ITm}8jqh7u7*LM}#bkj+&b8Q& z5Xd;75R*##3fP}35&`e0cEF#IZ}`-K~ASWqQSJsT7h3hL_YxD2(3(8ifSM&>;fF1k2e4S z0h38YK~(w~fzJSYg;pjd)(HGMBDw*XRpmSTDf%S~7g3Crzcg5A;inMY1S}7&%=Rd{ zfwWMHFNKdT2RVh}3=ONrf=smVzfk@o@v^E9eL>F=V#(;lMeSPN$WBT`N~O(L*QSmX|f?j+ur ztQl(2Kw7gKn3EKHiiHz^eu4E_19qZC?uBR^FgGW;13^y{>_34VMfhRZVu6PucC>|&#H&C(GLlyYW(&L&!9<9j0w&S1+eRLgfRUg_DI8_v z6Ltg1Zdkejm?H3UgiL_)MBw#|WaUmh8AyASfFWRpfE}nX&|>!i-39C}#C}%Y+1C5@ z9b%V;6(CC>dRvf%5iA0k3FRrkRA6JSx$);cz%Vcef*q`|hsE{>-2-etV5iFOc53t9 z3Sbkk3}hKZ%LJJh!5ok|P@V?NBz&jPph1HM4H`6P(4aws26e&z0rF~sk(?cvlmGw# M07*qoM6N<$g63|DeEmithril-starter-kit
\ No newline at end of file diff --git a/package.json b/package.json index 505836d..b09b35d 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,21 @@ { "name": "mithril-starter-kit", - "version": "0.0.1", - "description": "", + "version": "0.1.0", + "description": "A boilerplate Mithril application With Webpack", "main": "index.js", "scripts": { - "build": "webpack --progress --config webpack.pro.js", + "build": "webpack --config webpack.pro.js --progress", "dev": "webpack-dev-server --config webpack.dev.js" }, "repository": { "type": "git", "url": "git+https://github.com/mojowork/mithril-starter-kit.git" }, - "keywords": [], + "keywords": [ + "mithril", + "Webpack", + "boilerplate" + ], "author": "chaos", "license": "ISC", "bugs": { @@ -32,11 +36,12 @@ "css-loader": "^2.1.1", "cssnano": "^4.1.10", "file-loader": "^3.0.1", - "glob": "^7.1.4", + "glob-all": "^3.1.0", "html-webpack-plugin": "^3.2.0", "less": "^3.9.0", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.6.0", + "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "purify-css": "^1.2.5", "purifycss-webpack": "^0.7.0", diff --git a/src/views/app.js b/src/views/app.js index 4af92bc..e39020a 100644 --- a/src/views/app.js +++ b/src/views/app.js @@ -1,11 +1,10 @@ - const App = { - view: () => ( -
- -

Hello Mithril

-
- ) -} + view: () => + m( + "main", + m("img", { src: require("../assets/logo.png") }), + m("h1", "Hello Mithril ") + ) +}; -export default App \ No newline at end of file +export default App; diff --git a/webpack.dev.js b/webpack.dev.js index 42e4c10..e2e5dcc 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -3,94 +3,111 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -let config = { // config object - mode: 'development', - entry: { - app: './src/index.js', // entry file - }, - output: { // output - path: path.resolve(__dirname, 'dist'), // ouput path - filename: '[name].js', - }, - module: { - rules: [ - { - test: /\.jsx?$/, - use: [ - { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env'], - plugins: [ - ['transform-react-jsx', { // jsx - 'pragma': 'm', - }], - ], - } - }] - }, - { - test: /\.(le|c)ss$/, - use: [ - { - loader: 'css-hot-loader' //css hot - }, - { - loader: MiniCssExtractPlugin.loader - }, - { - loader: 'css-loader', - // Not Use modules - // options: { - // modules: true, - // localIdentName: '[name]_[local]_[hash:7]' - // }, - }, - { - loader: 'postcss-loader', - options: { - ident: 'postcss', - plugins: (loader) => [ - require('autoprefixer')() - ] - } - }, - { - loader: 'less-loader', - } +let config = { + // config object + mode: "development", + entry: { + app: "./src/index.js" // entry file + }, + output: { + // output + path: path.resolve(__dirname, "dist"), // ouput path + filename: "[name].js" + }, + module: { + rules: [ + { + test: /\.jsx?$/, + use: [ + { + loader: "babel-loader", + options: { + presets: ["@babel/preset-env"], + plugins: [ + [ + "transform-react-jsx", + { + // jsx + pragma: "m" + } ] - }, - { - test: /\.(png|gif|jpe?g|svg)$/i, - use: [{ - loader: 'url-loader', - options: { - name: '[name].[ext]?[hash:7]', - limit: 8192, - outputPath: 'assets/' - } - }] - }, - ] // end rules - }, - plugins: [ // webpack plugins - new HtmlWebpackPlugin({ - template: 'index.html', - filename: 'index.html' - }), - new MiniCssExtractPlugin({ - filename: '[name].css', - }), - new webpack.ProvidePlugin({ - m: 'mithril', //Global access - }), - ], - devServer: { - contentBase: path.join(__dirname, 'dist'), - hot: true, - open: true - }, - devtool: 'eval-source-map', // enable devtool for better debugging experience -} + ] + } + } + ] + }, + { + test: /\.(le|c)ss$/, + use: [ + { + loader: "css-hot-loader" //css hot + }, + { + loader: MiniCssExtractPlugin.loader + }, + { + loader: "css-loader" + // Not Use modules + // options: { + // modules: true, + // localIdentName: '[name]_[local]_[hash:7]' + // }, + }, + { + loader: "postcss-loader", + options: { + plugins: [require("autoprefixer")] + } + }, + { + loader: "less-loader" + } + ] + }, + // { + // test: /\.(eot|svg|ttf|woff2?)$/, + // use: [{ + // loader: 'file-loader', + // options: { + // name: '[name]-[hash:7].[ext]', + // outputPath: 'assets/fonts' + // } + // }] + // }, + { + test: /\.(png|gif|jpe?g|svg)$/i, + use: [ + { + loader: "url-loader", + options: { + name: "[name].[ext]", + limit: 8192, + outputPath: "assets/" + } + } + ] + } + ] // end rules + }, + plugins: [ + // webpack plugins + new HtmlWebpackPlugin({ + template: "index.html", + filename: "index.html" + }), + new MiniCssExtractPlugin({ + filename: "[name].css" + }), + new webpack.ProvidePlugin({ + m: "mithril" //Global access + }) + ], + devServer: { + contentBase: path.join(__dirname, "dist"), + hot: true, + open: true + }, + devtool: "eval-source-map" // enable devtool for better debugging experience +}; module.exports = config; \ No newline at end of file diff --git a/webpack.pro.js b/webpack.pro.js index 09385be..a5019b5 100644 --- a/webpack.pro.js +++ b/webpack.pro.js @@ -1,23 +1,24 @@ -const path = require('path') -const glob = require('glob'); -const webpack = require('webpack') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const CleanWebpackPlugin = require('clean-webpack-plugin') -const MiniCssExtractPlugin = require('mini-css-extract-plugin') +const path = require("path"); +const glob = require("glob-all"); +const webpack = require("webpack"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const CleanWebpackPlugin = require("clean-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // tree-shaking -const UglifyJsPlugin = require('uglifyjs-webpack-plugin') -const PurifyCSSPlugin = require('purifycss-webpack') +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +const PurifyCSSPlugin = require("purifycss-webpack"); module.exports = { - mode: 'production', + mode: "production", entry: { - app: './src/index.js' + app: "./src/index.js" }, output: { - path: path.resolve(__dirname, 'dist'), - filename: '[name]-[hash:7].js' + path: path.resolve(__dirname, "dist"), + filename: "[name]-[hash:7].js" }, module: { @@ -26,28 +27,33 @@ module.exports = { test: /\.jsx?$/, use: [ { - loader: 'babel-loader', + loader: "babel-loader", options: { - presets: ['@babel/preset-env'], + presets: ["@babel/preset-env"], plugins: [ - ['transform-react-jsx', { - 'pragma': 'm', - }], - ], + [ + "transform-react-jsx", + { + pragma: "m" + } + ] + ] } - }] + } + ] }, { test: /\.(png|gif|jpe?g|svg)$/i, - use: [{ - loader: 'url-loader', - options: { - name: '[name].[ext]?[hash:7]', - limit: 8192, - outputPath: 'assets/' + use: [ + { + loader: "url-loader", + options: { + name: "[name]-[hash:7].[ext]", + limit: 8192, + outputPath: "assets/" + } } - }] - + ] }, // { // test: /\.(eot|svg|ttf|woff2?)$/, @@ -63,57 +69,76 @@ module.exports = { { test: /\.(le|c)ss$/, use: [ - { - loader: 'css-hot-loader' - }, { loader: MiniCssExtractPlugin.loader }, { - loader: 'css-loader', + loader: "css-loader" // Not Use modules - // options: { + // options: { // modules: true, // localIdentName: '[name]_[local]_[hash:7]' // }, }, { - loader: 'postcss-loader', + loader: "postcss-loader", options: { - ident: 'postcss', - plugins: (loader) => [ - require('autoprefixer')(), - require('cssnano')() - ] + plugins: [require("autoprefixer")] } }, { - loader: 'less-loader', + loader: "less-loader" } ] } ] }, - optimization: { - minimizer: [new UglifyJsPlugin()], - }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', - filename: 'index.html' + template: "index.html", + filename: "index.html", + minify: { + removeAttributeQuotes: true, + collapseWhitespace: true, + removeComments: true + } }), new webpack.ProvidePlugin({ - m: 'mithril', //Global access + m: "mithril" //Global access }), new CleanWebpackPlugin(), new MiniCssExtractPlugin({ - filename: '[name].css', + filename: "[name]-[hash:7].css" }), new PurifyCSSPlugin({ // Give paths to parse for rules. These should be absolute! - paths: glob.sync(path.join(__dirname, './src/views/*.js')), + paths: glob.sync([ + path.join(__dirname, "./src/views/*.js"), + path.join(__dirname, "./src/views/**/*.js") + ]) }) - ] -} + ], + optimization: { + minimizer: [ + new OptimizeCSSAssetsPlugin({ + // Css minimized + cssProcessor: require("cssnano"), + cssProcessorPluginOptions: { + preset: [ + "default", + { + discardComments: { + removeAll: true + }, + normalizeUnicode: false + } + ] + } + }), + // JS minimized + new UglifyJsPlugin() + ] + } +};