您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“webpack有什么優(yōu)勢(shì)”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“webpack有什么優(yōu)勢(shì)”這篇文章吧。
Webpack是一款用戶打包前端模塊的工具,它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析,然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。主要是用來(lái)打包在瀏覽器端使用的javascript的。同時(shí)也能轉(zhuǎn)換、捆綁、打包其他的靜態(tài)資源,包括css、image、font file、template等
webpack的官網(wǎng)是 http://webpack.github.io/ ,文檔地址是 http://webpack.github.io/docs/
市面已存在大量的模塊管理和打包工具,為什么還重復(fù)造輪子,webpack有什么特色?
這些已有的模塊化工具并不能很好的完成如下的目標(biāo):
將依賴樹(shù)拆分成按需加載的塊
初始化加載的耗時(shí)盡量少
各種靜態(tài)資源都可以視作模塊
將第三方庫(kù)整合成模塊的能力
可以自定義打包邏輯的能力
適合大項(xiàng)目,無(wú)論是單頁(yè)還是多頁(yè)的 Web 應(yīng)用
webpack 特點(diǎn)
代碼拆分
Webpack 有兩種組織模塊依賴的方式,同步和異步。異步依賴作為分割點(diǎn),形成一個(gè)新的塊。在優(yōu)化了依賴樹(shù)后,每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊,但是 loader 轉(zhuǎn)換器可以將各種類(lèi)型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣,任何資源都可以成為 Webpack 可以處理的模塊。
智能解析
Webpack 有一個(gè)智能解析器,幾乎可以處理任何第三方庫(kù),無(wú)論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時(shí)候,允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的,還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件,來(lái)滿足各式各樣的需求。
快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率,這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
總結(jié)下來(lái)其主要的優(yōu)勢(shì):
1.按需加載模塊,按需進(jìn)行懶加載,在實(shí)際用到某些模塊的時(shí)候再增量更新
2.webpack 是以 commonJS 的形式來(lái)書(shū)寫(xiě)腳本,但對(duì) AMD/CMD 的支持也很全面,方便舊項(xiàng)目進(jìn)行代碼遷移。
3.能被模塊化的不僅僅是 JS 了,能處理各種類(lèi)型的資源。
4.開(kāi)發(fā)便捷,能替代部分 grunt/gulp 的工作,比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
5.擴(kuò)展性強(qiáng),插件機(jī)制完善
安裝
首先要安裝 Node.js, Node.js 自帶了軟件包管理器 npm
用npm 安裝webpack
$ npm install webpack -g
此時(shí) Webpack 已經(jīng)安裝到了全局環(huán)境下,可以通過(guò)命令行 webpack -h 查看相關(guān)指令
通常我們會(huì)將webpack安裝到項(xiàng)目依賴,這樣就可以使用本地版本的webpack
//進(jìn)入項(xiàng)目目錄 //確定已有package.json,沒(méi)有就npm init 創(chuàng)建 $ npm install webpack --save-dev //查看webpack 版本信息 $ npm info webpack //安裝指定版本 $ npm install webpack@1.31.x --save-dev
如果要使用webpack開(kāi)發(fā)工具,要單獨(dú)安裝 webpack-dev-server
$ npm install webpack-dev-server --save-dev
常用命令
webpack
構(gòu)建命令,webpack的常用參數(shù)
$ webpack --config webpack.min.js //另一份配置文件 $ webpack --display-error-details //顯示異常信息 $ webpack --watch //監(jiān)聽(tīng)變動(dòng)并自動(dòng)打包 $ webpack -p //壓縮混淆腳本,這個(gè)非常非常重要! $ webpack -d //生成map映射文件,告知哪些模塊被最終打包到哪里了
webpack-dev-server
webpack-dev-server是一個(gè)小型的node.js Express服務(wù)器,它使用webpack-dev-middleware中間件來(lái)為通過(guò)webpack打包生成的資源文件提供Web服務(wù)。它還有一個(gè)通過(guò)Socket.IO連接著webpack-dev-server服務(wù)器的小型運(yùn)行時(shí)程序。webpack-dev-server發(fā)送關(guān)于編譯狀態(tài)的消息到客戶端,客戶端根據(jù)消息作出響應(yīng)。
webpack-dev-server有兩種模式支持自動(dòng)刷新——iframe模式和inline模式
在iframe模式下:頁(yè)面是嵌套在一個(gè)iframe下的,在代碼發(fā)生改動(dòng)的時(shí)候,這個(gè)iframe會(huì)重新加載
在inline模式下:一個(gè)小型的webpack-dev-server客戶端會(huì)作為入口文件打包,這個(gè)客戶端會(huì)在后端代碼改變的時(shí)候刷新頁(yè)面
使用iframe模式,無(wú)需額外配置,只需在瀏覽器輸入http://localhost:8080/webpack-dev-server/index.html
使用inline模式有兩種方式:命令行和nodejs API
1.命令行: 在運(yùn)行時(shí),加上 --inline 選項(xiàng)
$ webpack-dev-server --inline
訪問(wèn),通過(guò)http://localhost:8080
就可以訪問(wèn)
2.nodejs API 方式 ,需要手動(dòng)把 webpack-dev-server/client?http://localhost:8080 加到配置文件的入口文件處
webpac-dev-server支持Hot Module Replacement,即模塊熱替換,在前端代碼變動(dòng)的時(shí)候無(wú)需整個(gè)刷新頁(yè)面,只把變化的部分替換掉
以上是“webpack有什么優(yōu)勢(shì)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。