webpack生產(chǎn)環(huán)境和開發(fā)環(huán)境的控制

1、、在webpack配置文件中判斷當(dāng)前模式（processenvNODE_ENV）對于我們的項目而言，有兩種模式，分別為開發(fā)模式和生產(chǎn)模式，在webpack中也有個mode選項，作用為設(shè)置當(dāng)前打包的模式。于是我們可能寫兩個甚至更多的webpack配置文件，在不同的模式下運行不同的文件。這個看起來問題不大，但是如果我只想把所有內(nèi)容寫在一個文件里面呢？這時就需要在配置文件里面獲取模式信息從而做定向操作，我們可以使用node里面的process.env對象（表示node環(huán)境相關(guān)的一些信息）。然后，我們就可以在env這個對象里面添加NODE_ENV屬性表示我們的具體模式，在配置文件里面可以通過：proc

2、ess.env.NODE_ENV進(jìn)行獲取。process.env.NODE_ENV,這是我們自己添加的一個用來區(qū)分環(huán)境的變量，我們通過這個來區(qū)分生產(chǎn)環(huán)境與開發(fā)環(huán)境。二、cross-env（跨平臺設(shè)置項目模式）由于給process.env設(shè)置NODE_ENV表示模式，在不同電腦上設(shè)置的方式是不一樣的，所以cross-env就來了，它可以跨平臺設(shè)置環(huán)境和使用環(huán)境變量。使用流程在webpack項目中安裝cross-env模塊cnpmicross-env-D通過腳本使用cross-env模塊設(shè)置模式變量在package.json的scripts選項中中寫下如下部分的代碼：build:cross-env

3、NODE_ENV二productionwebpack,dev:cross-envNODE_ENV二developmentwebpack當(dāng)執(zhí)行npm腳本，設(shè)置成功npmrundevnpmrunbuild在webpack配置文件中獲取當(dāng)前環(huán)境變量值1psrckagejsan粘bundfejs轡webpack.cDnfigJsXjsindeK確webDack.canfiqjs工例output護(hù)、path1constIN0DE_ENV=precess-env-NCDE_EN;2iTiwoTe*+NDDE_ENV+3/Mrebpackconfig.jis4constpath=requiretpsath1

4、);5nodexports=6iriod:NnDE_fflV,7*ntry:./erc/index.JsSHXA爻咋囂呂output:川鯊出交幷路徑佃Jfilename:*bjndla.js*,4S出玄吟名10/output的oath需翌足電對翳徑11path:pathresalvejldirnaTetdist舟12A13constNODE_ENV=process.env.NODE_ENV;console.log(+NODE_ENV+);/webpack.config.jsconstpath=require(path);module.exports=mode:NODE_ENV,entry:./

5、src/index.js,入口文件路徑配置output:輸出文件路徑配置filename:bundle.js,/輸出文件名/output的path需要是絕對路徑path:path.resolve(dirname,dist),三、webpack-merge配置文件的合并通過上面的操作我們已經(jīng)可以在webpack的配置文件里面實現(xiàn)模式的判斷了，但是這里還存在一個問題，那就是如果代碼全部都放在一個文件里面，這個文件會變得非常臃腫且不好擴(kuò)展與維護(hù)但是如果徹底的分開的話，有和最開始沒什么兩樣了，那么能不能有個折中的辦法呢？很明顯，有的。我們可以建立一個公共的webpack配置文件，這個文件里面把開發(fā)和生

6、產(chǎn)的公共配置部分取出來放入其中，然后單獨建立兩個文件，一個開發(fā)一個生產(chǎn)，其中只寫自己模式的極少內(nèi)容就可以了，最后當(dāng)我們運行開發(fā)或者生產(chǎn)文件時會自動合并功能的內(nèi)容。操作流程安裝合并模塊webpack-mergecnpmiwebpack-merge-D修改package.json文件配置build:cross-envNODE_ENV=.config.js,dev:cross-envNODE_ENV=developmentwebpack-configwebpack.dev.config.js-config是可以設(shè)置我們執(zhí)行哪個webpack文件，默認(rèn)是執(zhí)行webpack.config.js，但是我們

7、現(xiàn)在修改文件名了，所以我們要設(shè)置一下創(chuàng)建三個配置文件webpack.dev.config.js開發(fā)配置.config.js生產(chǎn)配置mon.config.js公共配置/mon.config.js公共配置constNODE_ENV=process.env.NODE_ENV;console.log(+NODE_ENV+);/webpack.config.jsconstpath=require(path);module.exports=mode:NODE_ENV,entry:./src/index.js,output:這里不指定具體文件名，文件名有具體的模式配置文件進(jìn)行制定path:path.reso

8、lve(_dirname,dist),/.config.js生產(chǎn)配置constmerge=require(webpack-merge);/這里弓I入mergeconstcommon=require(./mon.config.js);/這里引入公共代碼將公共模塊合并過來module.exports=merge(common,output:filename:pro.js,指定打包出來的文件名為pro.js,)/webpack.dev.config.js開發(fā)配置constmerge=require(webpack-merge);/這里弓I入mergeconstcommon=require(./mon

9、.config.js);/這里引入公共代碼module.exports=merge(common,output:filename:dev.js,/指定打包出來的文件名為dev.js,執(zhí)行腳本-運行配置文件-打包效果package.js4nwttfck-rridffrtJ5J阿.占制I埠事陽HlJiwhpack.d!BY.onfig.i5*bpAEk-rYL-UKJ5HBbpdcprD.coHtigw咻亡k-m.UJiwhpack.c4mnH)nxcriFjg.j5erd。UvEiiPHJ.OiMOrCTMmobilE-a-da(jtJljan-vw)pc-Jdapfftan-nampa5lss

10、-iri-gjp)pnat&Es-in-n&act-DiacIpiKlM-irrraaGt-rfrwired、posids-iH-vuia-rEKt-derrraxt-辭rro-拄譴恍代rEact-unit-lE5tiDg-pns)/LM-tdfimD7Ufi-(ie-mD-5iurr;eMap)/TJA-a2-b-d4imD,AM-uni1-lB5ljng-prD禺啟白*乩.iwn感anj./s皿詢屮丄或卸馳“也侶皿知旅扎prean/lflQxjiwmrw.canlli%afapkHiargiaKHfiJbpadk.pm.ccHtig.jflMunhnawri、HLMfapaclupra.r

11、anf1：J;E生尸配dfldliHKgireqijlf*1iMbpack-Mrt1jJccmiww=reiulfieBr/webp4triMfion,cfl(j.jsBJt/iir5l43ncdB_mcjiOesarc令.-nitigncreUpekjgfi.jsAn.u-KiKbpadc-cvrrnHinxanFiiiiisuJ5AetapKk.ddvztQnfig.|&JfiPKfapadcipKi.cm-ifig.juJ5-飛盧J口AntbwhHLICENSE：pbuildrtbpacknLCouLUmMMZMnglur&e孫憶hSSJ電的一ff虛|兇口1訶!-c伙沖樹應(yīng)*常*tf65

12、5-enNflCE_OW=firltiwwfbpacRkmt坤比陽嵐申曲疋eiHg：hpr&iyctlMH5h4c54MlKmKktFVerslflfiJbpMh4-.4L5Tjm：12TmBuiLtatJ站站居75:LlKAxsitmOwiikiChunkMwi!pro.js94Tbyfec4MattMluiinEntrypoiniHiln-pns.|B./Eirc/indfiK.jfi42bytetult5J,_iwb|wck-(tai!r-5rYflir3,II.3|M4ibp4ciMrwr/clwittThttp:/Iccilhflstr/Erc7xidiK.js韓bftsh1bIwi

13、ltI.,TBinrii-htiii/intilw,jsll4.16KiBrbuiltl./irwia-KdkilHslYtHlntitiHESl.2.Igfhtnl-KintitMs/LiHkiH.js231bftMiin1builtL_/iniMiaKidkilHE/Loglavalfil-Loglavnl/Lifa/LoglBVBl.jk|836KifiBiiiJibuilt./iiMMk：_iKdkiles/_3strif-unsi3-S-Idstri-aasi/indu.js161bytesainbuilt1.ymndniadules-iiEbipack-deM-iErvenJJ-l

14、ft-Jwehp&tk-dew-ser/Er/cljLeiit/indexjj5?htjtp:/-Lacalhn3.t:8B9&J/iwdk_KrduleK/_webfMckdev5enjri3-.It.399wEbjMElker-srMEr/CLlentriittpi/LacaLhOlV:fiD8Bi4.29KlibuiltI-grviade_wKfrilEs/hMbfckileuitrvertl.H.HebpaEk-detf-xerMr/rlieriit/outrLj.j1J1.51Kifi(aaiAIhiilt(./vmdeZBlEs/ZwebfiwkHleyirergl.11.Igwe

15、bpacktf-feir/clieht/socket,I1.53K1B1nBlhbiilltl(-/viodenlEs/hlpttckdeutrveml.1A.JwebpaEk-dev-ierrtr/rliefiit/ijtlli/ErEte&acIketUrl.jl2u91K1Buihlhiiilt(./mMeKAilas/wvbpack-dBM-iinfflrglIt.3webpack-dev-5Crrtr/C:Haiiit/utll!t.ji94葉l邛ulfij-built(./vwdeAilBs/_MBbpk-d6M-fervarJ.It.Spack-dBv-Brrir/tUjaiii

16、f/utiTi/rcLvadApp.jd;|1.59KiBtnalfkbuilt(./nfl4eHfal6/NBbpCk-Cl6M-lr1*聲w盈iptes片Bildbuilt(./AdflKdules/weftpadkZrityncJm?deHQuy譚badk/lh誡nnfturiivt17CbytbaIarthiltt/srG/lnAex.ji收Djftes*MlnLtulUJ*1hiddenrxluj.drrj;conplledsu-ccessfunyoutput:|filename:rdev.的文件名為血xjshdevServer:也contentBase:pathjoin_dirnamerdistrcompress:trueZ/fF.iSgzport:1O0B6Jopen:true,hot!true,overlay:tme,在開發(fā)模式文件中配置webpack-dev-server(package.jsonJwebpack.dev.config.jsXindex.htmlJ5index.jswebpack-dev-serverJS