混合app開發(fā)-第一天webpack課程

第1章wck簡 wck是什么 官網(wǎng)地 為什么使用w 第2章wck使用引 安裝wck與運行介 創(chuàng) 結(jié) 引入wck依 創(chuàng)建配置文 修改配置文 運行w 把運行命令配置到npm的script 為什么要用npm的 Npm的script的使 為發(fā) 啟動服 瀏覽器自動刷 修改wck.develop.config.js的配 第3章常用加載器介 加載器介 編譯jsx和ES6到原生 首先安裝下面的所有依 修改開發(fā)配置文 使 加載 首先依 修改配置文 Css加載策 加載 依 修改配置文 處 依 修改配置文 大處 處理結(jié) 文件處 說 依 修改配置文 內(nèi)聯(lián) 特殊模塊的 第4章部署策 發(fā)布配 修改npm的package.json文 修改wck.publish.config.js文 合并成單文 分離應(yīng)用和第..............................................................................何時應(yīng)該分 修改配置文 和gulp的集 第5章常用插件介 壓縮插 提取css插 合并配置文件插 創(chuàng)建index.Html頁面插 自動打開瀏覽器插 刪 插 拷貝文件插 提取js公共部分插 寫法 寫法 寫法 ProvidePlugin插 第6章其他了解知識 Resolve屬 Externals屬 開發(fā)環(huán)境中使用壓縮文 多文件.............................................................................................優(yōu)化開 熱加載組 優(yōu)化緩 第7章.....................................................................................................Wck適用范圍說 wck無法抽取html中的.....................................................第1章wck簡wck是什么CommonJSAMD是用于JavaScript模塊管理的兩大規(guī)范前者定義的是模塊的同步加載，主要用于NodeJS；而后者則是異步加載，通過requirejs等工具適用于前端隨著npm成為主流的JavaScript組件發(fā)布平臺越來越多的前端項目也依賴于npm上的項目，或者自身就會發(fā)布到npm平臺。因此，讓前端項目更方便的使用npm上的資源成為一大需求。web開發(fā)中常用到的靜態(tài)資源主要有JavaScript、CSS、、Jade等文件，wck中將靜態(tài)資源文件稱之為模塊。wck是一個modulebundler(模塊打包工具)，其可以兼容多種js書寫規(guī)范，且可以處理模塊間的依賴關(guān)系，具有更強大的js模塊化的功能。Wck對它們進行統(tǒng)一的管理以及打包發(fā)布，其主頁用下面這張圖來說明Wck的作用官網(wǎng)地官網(wǎng)：先過這三個文檔文Wck-handlebook:Gitbook:上的幾十個example看一參考 /ruanyf/wck- /petehunt/wck- mon- 為什么使用w對CommonJS、AMD、ES6的語法做了兼對js、css、等資源文件都支持打串聯(lián)式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對offeeSpt、ES6的支持有獨立的配置文件w可以將代碼切割成不同的chunk，實現(xiàn)按需加載，降低了初始化時支持SourceUrls和SourceMaps，易于調(diào)具有強大的Plugin接口，大多是內(nèi)部插件，使用起來比較靈8.wck使用異步IO并具有多級緩存。這使得wck很快且在增量第2章wck使用引因為官網(wǎng)提供的各種配置和啟動方法有原生的cli也有配置文件的方式，我安裝wck與運行介創(chuàng) 結(jié)Deploy是編譯之后的可用于打包的文件，src中的是開引入wck依在項目 打開命令窗口引入項目依賴，全局安 w -g//全局安裝w創(chuàng)建配置文在項目 創(chuàng)建三個或多個 ck配置文 //公用的配置放在這里面（可通過插件繼承 //開發(fā)環(huán)境中用到的配置文 //生產(chǎn)環(huán)境中用到的配置文修改配置文詳細的請看這里////////loadervarpath=module.exports=entry:path.resolve(dirname,'src/js/app.js'),output:{path:path.resolve(dirname,'deploy'),filename:'bundle.js',}運行w1、通過配置文件運行（通用在 運行 ck令，默認(rèn)會去查找名稱為 這時候我們可以通過運行下面令進行配置文件的選 ck–- 2、通過cli命令運行（了解 ckcli也提供了命令可以進行運行，例 - ck的監(jiān)視命令，文件發(fā)生變化自動編 ck--entry./entry.js--output-pathdist--output-file//配置文件的啟 和輸 ck最基本的啟動 ck命 ckw提供watch方法，實時進行打 ckp對打包后的文件進 ckd提供SourceMaps，方便調(diào) ck--colors輸出結(jié)果帶彩色，比如：會用紅色顯示耗時較長的步 ckprofile輸出性能數(shù)據(jù)，可以看到每一步的耗 ckdisplay-modules默認(rèn)情況下node_modules下的模塊會被隱藏，加上這個參數(shù)可 ck--display-error-details方便出錯時能查閱更詳盡的信息（比如 ck尋找模的過程），從而更好定位到問你可以運行wck -h查看wck的其令，自行了解，或者通過英文官網(wǎng)了解wckCli部分3、作為nodejsapi運行（了解varvar ck=w},function(err,把運行命令配置到npmscript為什么npm1、npm是一個非常好用的用來編譯的指令，通過npm你可以不用去擔(dān)心中設(shè)置scripts的值就可以了。2、真正開發(fā)的時候你的wck令會敲很長，因為有很多命令需要設(shè)置，即便你用了配置文件的方式，但一些--colors--hot這些命令是沒法在配置 ck-dev-server--devtooleval--progress--colors--hot--content-base所以你不可能每次都敲這么長，因而我們就把這一大串配置到npmNpmscript的使1、你首先需要安裝 ck，這時候不全局安npmi ck--"scripts":"test":"echo\"Error:notestspecified\"&&exit1","develop":"w ck--configw "publish":"w ck--configw 2、配置npm"scripts":"test":"echo\"Error:notestspecified\"&&exit1","develop":"w ck--configw "publish":"w ck--configw 3、在 打開令窗口運 為發(fā) 啟動服如果需要一直輸入npmrundevelop確實是一件非常無聊的事情幸運的是，我們可以把讓他安靜的運行，讓我們設(shè)置wck-dev-server除了提供模塊打包功能，Wck還提供了一個基于Node.jsExpress框架的開發(fā)服務(wù)器，它是一個靜態(tài)資源Web服務(wù)器，對于簡單靜態(tài)頁面或者僅依賴于獨立服務(wù)的前端頁面，都可以直接使用這個開發(fā)服務(wù)器進行開在開發(fā)過程1、安裝wck-dev- ck-dev- –save-2、調(diào)整npmpackage.jsonscripts部分中開發(fā)命令的配{"scripts": ck-dev- --config ck.develop.config.js--devtool--progress--colors--hot--content-base"publish": ck--config "watch": ck--config }}注釋 ck-dev-server在localhost:8080建立一個Web服務(wù)--devtooleval為你的代碼創(chuàng)建源地址。當(dāng)有任何報錯的時候可以讓你更加精確地定位到文件和--progress顯示合并代碼進--colors--hot，命令行中顯示顏色--content- 指向設(shè)置的輸 //這點一定是我們的發(fā)3、你會看到效果總的來說，當(dāng)你運行npmrundevelop的時候，會啟動一個Web服務(wù)器，4、注用 ck-dev-server生成bundle.js文件是在內(nèi)存中的，并沒有實際生如果的文件夾中已經(jīng)有bundle.js就不會自動刷新了，你需要先bundle.js文件手動刪用webstorm的注意了因為他是自動保存的所以可能識別的比較慢，你需要手動的ctrl+s一下瀏覽器自動刷修改wck.develop.config.js的配修改entry部分如下圖varpath=module.exports=path.resolve(dirname,'src/js/app.js')output:path:path.resolve(dirname,filename:module:loaders:{test:/\.css$/,loader:"style!css"]}}加載器介Loader：這是 ck準(zhǔn)備的一些預(yù)處理工jsxES6到原首先安裝下面的所有依npminstallbabel-loader--save-npminstallbabel- babel-preset- babel-preset- --save-修改開發(fā)配置文module:loaders:{test/\.jsx?$/,//用正則來匹配文件路徑，這段意思是匹配js或者loader:babel',//加載模塊"babel"是"babel-loader"query:presets:['es2015',}}]}使直接從新運行npmrundevelop即 ck允許像加載任何代碼一樣加載CSS。你可以選擇你所需要的方式，但是你可以為每個組件把所有你的CSS加載到主文件中來做任何事情。加載CSS需要css-loader和style-loader，他們做兩件不同的事情css-loader會遍歷CSS然后找到url()表達式然后處理他們，style-loader會把原來的CSS代碼插入頁面中的一個style中。首先依npminstallcss- style-loader--save-修改配置文{test:/\.css$/,//Only.cssloader:'style!css'//Runboth}！用來定義loader的串聯(lián)關(guān)系，"-loader"是可以省略不寫的，多個loader之間“!”連接起Css加載策1、在你的主文件中，比如src/app.js你可以為整個項目加載所有的 './project-CSS就完全包含在合并的應(yīng)用中，再也不需要重新2、懶加載（推薦如果你想發(fā)揮應(yīng)用中多重文件的優(yōu)勢，你可以在每個點包含各自CSS你的模塊用文件夾分離，每個文件夾有各自的CSS和JavaScript文件。再次，當(dāng)應(yīng)用發(fā)布的時候，導(dǎo)入的CSS已經(jīng)加載到每個文件中。3、定制組件你可以根據(jù)這個策略為每個組件創(chuàng)建CSS文件，可以讓組件名和CSS中的class使用一個命名空間，來避免一個組件中的一些class干擾到另外一些組件的class。4、使用內(nèi)聯(lián)樣式取代CSS文在“ReactNative”中你不再需要使用任何CSS文件你只需要使用style屬性，可以的CSS定義成一個對象，那樣就可以根據(jù)你的項目重新來考略你的CSS策略。注意：這點的樣式都沒有依 sass- --save-修改配置文{test:/\.scss$/,loader:'style!css!sass'}處直到HTTP/2你才能在應(yīng)用加載的時候避免設(shè)置太多HTTP請求。根據(jù)瀏覽器不同你必須設(shè)置你的并行請求數(shù)，如果你在你的CSS中加載了太多的話，可以自動把這些轉(zhuǎn)成BASE64字符串然后內(nèi)聯(lián)到CSS里來降低必要的的數(shù)量，不過Wck可以讓這個平衡十分輕松適應(yīng)。依npminstallurl- file-loader--save-修改配置文{test:/\.(png|jpg)$/,loader:'url?limit=25000'}加載器它會把需要轉(zhuǎn)換的路徑變成BASE64字符串在其他的Wck書中提到的這方面會CSS中的“url()”像其他require或者import來處理。url-loader傳入的limit參數(shù)是告訴它如果不大于25KB的話要自動在它從屬的css文件中轉(zhuǎn)成BASE64字符串。大處在代碼中是一下情況background:}//或varimgimg.src=你可以這樣配module:module:{test:loader:'url-}針對上面的兩種使用方式，loader可以自動識別并處理。根據(jù)loader中的設(shè)置，wck會將小于指點大小的文件轉(zhuǎn)化成base64格式的dataUrl，其他圖片會做適當(dāng)?shù)膲嚎s并存放在指定中。當(dāng)然你也可以用3.6中的方處理結(jié)Afterlaunchingtheserver,small.pngandbig.pngwillhavethefollowing<img<img文件處理（了解說現(xiàn)在w ck處理css中的還是可以的，但是處理html中的能力有限，所以有的地方最好放在css中，或者使用require的方式依npmnpminstallfile-loader–save-修改配置文{test:loader:'file-}output:注意：這點由于一直加載不上，所以我把輸出的配置改為output:path:path:path.resolve(dirname,filename:我把下面的loader注釋了，影響的加 test: loader:內(nèi)聯(lián)fonts（了解字體實在是非常難引入正確，首先，通常我們有4種不一樣的格式，但是樣只會讓CSS文件更加膨脹，然后又沒辦法優(yōu)化。{test:loader:}取決與你的項目，你可能可以選擇出一種字體格式，如果你不考略O(shè)peraMini，所有的瀏覽器都支持.woff和.svg格式。問題是不同格式下在各種瀏覽器下字體看起來會有一點點不同。所以測試.woff和.svg，然后找出能夠在所{test:loader:}特殊模塊的Shim（了解比如某個模塊依賴window.jQuery,需要從npm模塊中將jquery ck有不少的Shim的模塊,比如expose-loader其他比如從模塊中導(dǎo)出變量...具體說明有點晦澀手頭的兩個例子,比如我們用到Pen這個模塊{test:require.resolve('pen'),loader:這個模塊對依賴一個window.jQuery,可我手頭的jQuery是CommonJS語法的而{test:require.resolve('pen'),loader:發(fā)布配npmpackage.json文"publish":"ck--config -指向生產(chǎn)的配置文件，并且加上了 ck的cli的-p,他會自動做一些優(yōu)修改wck.publish.config.js文varpath=varpath=varnode_modules=path.resolve(dirname,module.exports=entry:entry:path.resolve(output:output:path:path.resolve(dirname,{test.jsx?$/,//用正則來匹配文件路徑，這段意思是匹配js或者loader'babel',//加載模塊"babel"是"babel-loader"query:presets:['es2015',}{test.css$/,//cssloader:'style!css'//Runboth{test //sassloader:{test:loader:}]}} 合并成單文一般情況下只有在下面的情況下才使用單模式分離應(yīng)用和何時應(yīng)該分當(dāng)你的應(yīng)用依賴其他庫尤其是像ReactJS這種大型庫的時候你需要考慮把1、當(dāng)你的第的體積達到整個應(yīng)用的20%或者更高的時候2、更新應(yīng)用的時候只會更新很小的一部4、有用戶修改配置文varvar 結(jié)果注意記住要把這些文件都加入到你的HTML代碼中不然你會得到一個錯誤UncaughtReferenceError:wckJsonpisnotdefinedgulp的集分為使用流和不使用gulp+wck構(gòu)建多頁面前端項 -demo實際例子 //yourplugins]wck提供了[豐富的組件]用來滿足不同的需求，當(dāng)然我們也可以自行實//yourplugins]詳細的請看這里壓縮插這個插件是wck自帶css插在w ck中編寫js文件時可以通過require的方式引入其他的靜態(tài)資源可通過loader對文件自動解析并打包文件。通常會將js文件打包合并，css文件會在頁面的header中嵌入style的方式載入頁面。但開發(fā)過程中我們并不想將樣式打在中，最好可以獨立生成css文件以外鏈的形式加載這時extract-text-wck-plugin插件可以幫我們達到想要的效果。需要使用npm的方式加載插件，然后參見下面的配置，就可以將js中的css文件提取，并以npminstallextract-text- 我發(fā)現(xiàn)這個有一個問題就是他只能把css抽出來但是sass的樣式不能分varvarExtractTextPlugin=require("extract-text- index.Html頁面插html-wck-自動打開瀏覽器插js公共部分插提取公共文寫法自定義公共模塊ProvidePlugin自動添加插件，全局插件，直接使刪 插clean