這篇文章主要為大家展示了“webpack有什么優(yōu)勢”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“webpack有什么優(yōu)勢”這篇文章吧。

公司主營業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出香河免費(fèi)做網(wǎng)站回饋大家。

Webpack是一款用戶打包前端模塊的工具，它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tà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)：

1. 將依賴樹拆分成按需加載的塊

2. 初始化加載的耗時(shí)盡量少

3. 各種靜態(tài)資源都可以視作模塊

4. 將第三方庫整合成模塊的能力

5. 可以自定義打包邏輯的能力

6. 適合大項(xiàng)目，無論是單頁還是多頁的 Web 應(yīng)用

webpack 特點(diǎn)

代碼拆分

Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。

Loader

 Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

智能解析

Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 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)行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。

快速運(yùn)行

Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

總結(jié)下來其主要的優(yōu)勢：

1.按需加載模塊，按需進(jìn)行懶加載，在實(shí)際用到某些模塊的時(shí)候再增量更新

2.webpack 是以 commonJS 的形式來書寫腳本，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。

3.能被模塊化的不僅僅是 JS 了，能處理各種類型的資源。

4.開發(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)境下，可以通過命令行 webpack -h 查看相關(guān)指令

通常我們會(huì)將webpack安裝到項(xiàng)目依賴，這樣就可以使用本地版本的webpack

//進(jìn)入項(xiàng)目目錄
//確定已有package.json，沒有就npm init 創(chuàng)建
$ npm install webpack --save-dev

//查看webpack 版本信息
$ npm info webpack
//安裝指定版本
$ npm install webpack@1.31.x --save-dev

如果要使用webpack開發(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)聽變動(dòng)并自動(dòng)打包
 
$ webpack -p //壓縮混淆腳本，這個(gè)非常非常重要！
 
$ webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了

webpack-dev-server

webpack-dev-server是一個(gè)小型的node.js Express服務(wù)器,它使用webpack-dev-middleware中間件來為通過webpack打包生成的資源文件提供Web服務(wù)。它還有一個(gè)通過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模式

1. 在iframe模式下：頁面是嵌套在一個(gè)iframe下的，在代碼發(fā)生改動(dòng)的時(shí)候，這個(gè)iframe會(huì)重新加載

2. 在inline模式下：一個(gè)小型的webpack-dev-server客戶端會(huì)作為入口文件打包，這個(gè)客戶端會(huì)在后端代碼改變的時(shí)候刷新頁面

使用iframe模式，無需額外配置，只需在瀏覽器輸入http://localhost:8080/webpack-dev-server/index.html

使用inline模式有兩種方式：命令行和nodejs API

1.命令行： 在運(yùn)行時(shí)，加上 --inline 選項(xiàng)

$ webpack-dev-server --inline

訪問，通過http://localhost:8080 就可以訪問

2.nodejs API 方式 ，需要手動(dòng)把 webpack-dev-server/client?http://localhost:8080 加到配置文件的入口文件處

webpac-dev-server支持Hot Module Replacement，即模塊熱替換，在前端代碼變動(dòng)的時(shí)候無需整個(gè)刷新頁面，只把變化的部分替換掉

以上是“webpack有什么優(yōu)勢”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！