|
前兩篇中我們使用webpack完成了靜態(tài)資源（css/js/img）等自動寫入HTML模板中,，同時還可以為靜態(tài)資源添加hash版本號，既滿足了我們對于靜態(tài)資源的打包要求,，同時又無需開發(fā)人員介入打包過程，讓我們的重點(diǎn)集中在業(yè)務(wù)邏輯的實(shí)現(xiàn)上來,。但是每次修改完代碼后如果手動執(zhí)行 webpack 命令才能生效的話,，那也夠虐心的，好在的webpack為我們提供了一個強(qiáng)力的開發(fā)工具：webpack-dev-server,！
一,、代碼壓縮在開始了解webpack-dev-server之前，我們還有一件準(zhǔn)備工作需要做，那就是完成對代碼的壓縮混淆,，不僅可以保證代碼的安全性,，還可以降低資源文件的大小，減少網(wǎng)絡(luò)傳輸,。 A. 壓縮HTML  1 new HtmlWebpackPlugin({ //根據(jù)模板插入css/js等生成最終HTML 2 favicon:'./src/img/favicon.ico', //favicon路徑 3 filename:'/view/index.html', //生成的html存放路徑,，相對于 path 4 template:'./src/view/index.html', //html模板路徑 5 inject:true, //允許插件修改哪些內(nèi)容，包括head與body 6 hash:true, //為靜態(tài)資源生成hash值 7 minify:{ //壓縮HTML文件 8 removeComments:true, //移除HTML中的注釋 9 collapseWhitespace:true //刪除空白符與換行符 10 } 11 }) HtmlWebpackPlugin插件在生成HTML調(diào)用了 html-minifier 插件來完成對HTML的壓縮,，這里我們使用兩個配置完成來移除HTML中的注釋以及空白符達(dá)到壓縮的效果,，其他的具體的配置參數(shù)大家請參考 html-minifier API
B. 壓縮JS與CSS 1 new webpack.optimize.UglifyJsPlugin({ //壓縮代碼 2 compress: { 3 warnings: false 4 }, 5 except: ['$super', '$', 'exports', 'require'] //排除關(guān)鍵字 6 }), webpack已經(jīng)內(nèi)嵌了uglifyJS來完成對JS與CSS的壓縮混淆，無需引用額外的插件,。 這里需要注意的是壓縮的時候需要排除一些關(guān)鍵字,，不能混淆，比如$或者require,，如果混淆的話就會影響到代碼的正常運(yùn)行,。 修改完 webpack配置后，我們就可以運(yùn)行webpack命令來重新打包了,。 這次可以看到dist下輸出的Js/css/html都是壓縮過的,。 參考代碼：https://github.com/xiaoyunchen/webpack/blob/master/webpack.config.js OK，到目前為止,，我們的靜態(tài)資源文件已經(jīng)可以自動生成,，壓縮，合并（webpack主要打包功能）已經(jīng)基本上配置完成,。
二,、webpack-dev-serverwebpack開發(fā)服務(wù)器，是webpack官方提供的一個輔助開發(fā)工具,，它可以自動監(jiān)控項(xiàng)目下的文件,，一旦有修改保存操作，開發(fā)服務(wù)器就會自動運(yùn)行webpack 打包命令,，幫我們自動將開發(fā)的代碼重新打包,。而且，如果需要的話,，還能自動刷新瀏覽器,，重新加載資源。 Cool,！一般前端開發(fā)人員都會有兩臺顯示器,，一臺用于編輯代碼，一臺用于打開瀏覽器查看效果,。如果配置上webpack-dev-server的話,，我們只需要在保存修改后的代碼,，什么也不用做，webpack就能自動幫我們打包代碼,，同時自動刷新瀏覽器,，讓我們立馬看到修改后的效果。 同樣的,，我們首先通過npm安裝webpack-dev-server: npm install webpack-dev-server --save-dev 安裝完成后我們就可以在項(xiàng)目根目錄通過 webpack-dev-server 命令來啟動開發(fā)服務(wù)器了,，當(dāng)然這其中也有很多配置，具體的API請參考：webpack-dev-server Options 在webpack配置文件中增加開發(fā)服務(wù)器的配置： devServer:{
contentBase:'./dist/view'
}
這里主要是將其運(yùn)行目錄設(shè)置為打包后的view目錄,。 然后我們通過命令來啟動開發(fā)服務(wù)器： webpack-dev-server --inline webpack-dev-server有兩種啟動模式： iFrame：該模式下修改代碼后會自動打包,，但是瀏覽器不會自動刷新 inline：內(nèi)聯(lián)模式，該模式下修改代碼后,，webpack將自動打包并且刷新瀏覽器,，讓我們看到最終的修改效果 大家可以分別啟動這兩種模式來驗(yàn)證下不同的效果，一般我們都選擇inline模式,。 服務(wù)器啟動成功以后,，我們只需要在瀏覽器中訪問 http://localhost:8080 即可訪問。
很好,！這樣我們就很輕松的實(shí)現(xiàn)了一邊修改代碼一邊查看效果的目的,。 等等，還沒完,。webpack還為我們提供了一種更NX的技術(shù),，叫做HMR！
三,、Hot Modules ReplacemantHMR,，模塊熱部署。 也就是說我們的修改后的代碼不僅可以自動打包,，而且瀏覽器不用完全刷新,，只需要異步刷新，加載修改后部分代碼即可,，加載完成效果會馬上反應(yīng)在頁面效果上,。 是的，很屌的樣子,。但是啟動這個模式并不是難事,，我們只需要在啟動webpack-dev-server是添加--hot參數(shù)即可。 webpack-dev-server --inline --hot 我們啟動HMR后,，來看下具體的效果： 首先我們訪問 http://localhost:8080 這是我們之前做的效果,，點(diǎn)擊按鈕后，瀏覽器通過異步請求加載了chunk1這個模塊JS以及我們所需要的圖片資源,。請注意這里的時間戳和邊框顏色。 然后我們到代碼CSS中去修改邊框顏色，將其修改為藍(lán)色： 這時,，webpack檢測到文件的修改保存操作,，然后自動執(zhí)行了打包操作。 我們到瀏覽器中去看下效果：
哇哦,，邊框顏色改變成了藍(lán)色,！ 1. 時間戳沒變，說明我們的瀏覽器并不是全部刷新,。 2. 開發(fā)工具中的網(wǎng)絡(luò)請求多了兩個請求,，一個是向服務(wù)器發(fā)起詢問，判斷是否有更新內(nèi)容,，二是向服務(wù)器獲取更新內(nèi)容的部分,，注意不是全部代碼，只是修改的片段,。 這個部分強(qiáng)烈建議大家實(shí)際動手操作體驗(yàn)一下具體的效果,。
模塊熱部署的確很好用，能讓我們在即時不刷新瀏覽器的情況下也能看到修改后的頁面效果,。 但是這個技術(shù)目前只是在試驗(yàn)階段,，可能會存在一些BUG，所以不建議大家在生產(chǎn)環(huán)境中使用,，在開發(fā)環(huán)境中體驗(yàn)一下到是沒啥問題,。 另外，值得一說的是,，使用HMR以后,，會一定程度的增加bundle的文件大小。 下圖是未使用HMR模式時,，bundle文件index.js為170kb 使用HMR模式以后,，文件增大到177Kb，請注意我這里功能比較簡單,，而且對代碼進(jìn)行了壓縮,，所以可能看上去差別不是很大。
小結(jié)通過配置webpack-dev-server,，希望能將前端開發(fā)人員從這些重復(fù)性的打包構(gòu)建的工作中解放出來,，將時間與精力投放在實(shí)際的業(yè)務(wù)代碼開發(fā)上去。
|
|
|
