webpack生产环境和开发环境的控制

、在webpack配置文件中判断当前模式（process.env.NODE_ENV对于我们的项目而言，有两种模式，分别为开发模式和生产模式，在 webpack中也有个mode选项，作用为设置当前打包的模式。于是我们可能写两个甚至更多的webpack配置文件，在不同的模式下运行不同的文件。这个看起来问题不大，但是如果我只想把所有内容写在一个文件里面呢？这时就需要在配置文件里面获取模式信息从而做定向操作，我们可以使用node里面的process.env对象（表示node环境相关的一些信息）。然后，我们就可以在env这个对象里面添加NODE_ENVi性表示我们的具体模式，在配置文件里面可以通过：process.env.NODE_EN进行获取。process.env.NODE_ENV这是我们自己添加的一个用来区分环境的变量，我们通过这个来区分生产环境与开发环境。二、cross-env（跨平台设置项目模式）由于给process.env设置NODE_ENV表示模式，在不同电脑上设置的方式是不一样的，所以cross-env就来了，它可以跨平台设置环境和使用环境变量。使用流程在webpack项目中安装cross-env模块cnpmicross-env-D通过脚本使用cross-env模块设置模式变量在package.json的scripts选项中中写下如下部分的代码:当执行叩m脚本，设置成功npmrundevnpmrunbuild在webpack配置文件中获取当前环境变量值HPKkagejwnxfunw如Jo wcbpad<.«nfigjs* 」・iMe«WQbpa&k-en1/^瞻wec^xortiq.|E乂忖』cunknowns-^沪oulput>庐pathconstNODEBW-process.env.NODEENV；wnwlelogr—+WOEENV+11 °)；1 //nctipark.ronfigrj4ewiMpiith-rrquire(*path*):t it"U'.P*piptirT={a anderMiDf.FNV,1 ・曲庁評77!育踊m output1{升・出丈荐踣程皿filenvie：'bund'LcJs,并暮岀Jc+tfi//cutoutlloathiffn足哪阱S径path:path*resolve^_dirnoif,'tiist| hJwebpack-merge配置文件的合并通过上面的操作我们已经可以在webpack的配置文件里面实现模式的判断了，但是这里还存在一个问题，那就是如果代码全部都放在一个文件里面，这个文件会变得非常臃肿且不好扩展与维护但是如果彻底的分开的话，有和最开始没什么两样了，那么能不能有个折中的办法呢？很明显，有的。我们可以建立一个公共的webpack配置文件，这个文件里面把开发和生产的公共配置部分取出来放入其中，然后单独建立两个文件，一个开发一个生产，其中只写自己模式的极少内容就可以了，最后当我们运行开发或者生产文件时会自动合并功能的内容。操作流程安装合并模块webpack-mergecnpmiwebpack-merge-D修改package.json文件配置--config是可以设置我们执行哪个webpack文件，默认是执行webpack.config.js但是我们现在修改文件名了，所以我们要设置一下创建三个配置文件webpack.dev.config.js开发配置.config.js生产配置tmHiparkinrga.并mfe^Kl[.praxanrt^.|&*[j*J-^nkrawr^皿 dvv.Wiji^i・六bpy沁tM 盲用i^mpjiEXp脂LfVtlg#1!w+kf-MtAiWCiC4CXC4)niH4nOQnf^ljlT.771PMDFMI3>MMlnt#i*■商iLLr*l"iM**・<ii4fifl|j.#/31・giaAgjMrf*eti计=fqulrv*I#nh：V■iwrth.(I.nl：lyrJS■*)twiobilB-itiwUosn-vwpc•ldip4||hM-HIHEK»l£BE-iin-QUhpPVsAesstfs-tbad-renirecpoitusiFkvuarivtlE-dlvirrQ4kW也细优vw-dimatirmd-soumMtqpvuii-a3«-riafTuvue-urfi-!wling-pmc^ra€pKk-rrwgfi!』■itJidwjiiEpree、node-^madLici*na■£■直孔制曰Mrh^iitf1imMic|jf"Ehrtp4th-wrg*IMnglulnpn^uriguilid*<L上片&Ull4ra/fIflfjIt9H5El-mmB72Wr,n*rt«(ii-*ierjeCfftii-rhvWOOf_0W=flrodXiCTWWwebp^Ch—fiAflfWMWQm疋MFlJJjH!♦ .gitigrwrc 甘|l pfl£kAgQ.|x«n Um ^Pttipfckdim<4iWeg.il uM A^klpKktPfluWlIlQj> UJK-f.|・JSIfldKInn:WtbpicI4.4L.1TJjk_127«^Built■&：科T卜M~«F5rU:HflRiAsm< tmEhHfci ChnnkMmme屮*Wb产■! tL4Uti«d|MilhEntrypoiinimila=prra_Je|4j./m/iHin.jii4itE^Evu<t)LBuiltjrhiMfIiMtaMac!HpglL^hi-r；Mfcg4rt.-aar^a7ihangil4j$Q1UEENEL四、开发模式下的热更新/热替换--webpack-dev-server安装：cnpmiwebpack-dev-server-D使用：把脚本中的webpack换成webpack-dev-server即可效果id«¥.jis3W和思mlfi[■ittfid]vainentryira丄Mt ■=d**.j»[B|Mjlti・磚・/vrc/i»ddiE.jt棘D0厂{Mini1i.r^iltjI./HMlfli-e/_aiis<i-*it3il*l-i-7*HiHi"hital/irritaffl,jsi斗・1&KiB{mia>libailt]■1.3dwl-r«e«K/lM«iJIJUL Ibuilt][./Mda■adHl*E/Bhrt9JL-flHtiti4i«1.3・ j门 ta^trs{uia}[built])[.)rMMda_BM^il>E/_li)fLmm»141.&.<4dLBglfl¥Bl/'L±ita/liBgl»BL.jsj|4-36ItiB{■■!■}[built]l[ri/_ttrip-Mi>t<9ji]161fiytn匚〕[./rwdE-_Hodults/uebfiack-diev-server^J■It.JptaEhiiaclk-ctetr-^emrtr/clienindex.js?tittp://lacjilJwst:SliBfrJ-/Mde■oAules/_Meh^ack«dEav^HrvEr^l.1A.3gw•VAv-MFHiVtllWtThftfjVLKE-iJmCtM4.23mlgUjLtailt]BidBlln/wlip»c：fc-<irv-!Mrwr^l.It.ItM^ffadE-tfw-Mrvvr/CllMit/evtrVtir.jf)3^1KLBtlllk}[Wilt]IB/iwieHdules/ue*«atk-dew-MnrtfB3.11.jOMAiAefti-dev-&eriher>rcllait/s4ck«t..jsI1.51KiB-{ula}[built|I Kll4m1h>I./iwdendHlni/MfefHrEK-drv-Mrwr?3dIt.30Wfef*cfc-dnr-3iariihcri/cljjHit/iftJi'Lt/14||.j*]9€4byl"■:biu'■|built|I. k/trttwk-dmi-Mrwrtfl.1*.J«wito*MlHiw-Miwr/cUMiViit£U/rtlM^Hffi.JiI1.S9KIBf町[bnLUIwrtvmk-dru-Mirw«ia- 3^#itpMlk-4n-Mrnr/CllMit/wtJilt/i!<Btf1v»*PV«i^jftI b>Ctb£M»Li*I./iwleikhJjteh/weij^iLhXtwils^nc pcJk/ltotiya£帕飞・\门曲517Bib^Les{mlIjiI[built]42Bytci Hbviltj*IBhuld-enrieriiilesiCgfipiledsKcessfullyi.[]在开发模式文件中配置webpack-dev-server{>package,json Jswebpack.dev,configJsxc>index.htmljsindex.jswebpack-dev-server>jswebpack.dev.configjs>[轲<unknown>>沪devServer//礎b閱tied电叭“nfig.js幵岌配豐constmerge=require('webpack-merge*)；//j^S引入皿亡內芒constcommon=requiref\/webpack^common+ccnfig+js' 引入吿共代constpath=require("p3th");5module■电xparts二merge(cannonj{output:{filename!F刖.