webpack 介紹 & 安裝 & 常用命令

標籤：環境   --   用戶端   軟體   動態   入門   cal   config   module   

 

本篇部分摘錄於 webpack中文入門指南-模組系統 & webpack dev server

Webpack是一款使用者打包前端模組的工具，它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則產生對應的靜態資源。主要是用來打包在瀏覽器端使用的javascript的。同時也能轉換、捆綁、打包其他的靜態資源，包括css、image、font file、template等

webpack的官網是 http://webpack.github.io/ ，文檔地址是 http://webpack.github.io/docs/

市面已存在大量的模組管理和打包工具，為什麼還重複造輪子，webpack有什麼特色？

這些已有的模組化工具並不能很好的完成如下的目標：

• 將依賴樹拆分成按需載入的塊
• 初始化載入的耗時盡量少
• 各種靜態資源都可以視作模組
• 將第三方庫整合成模組的能力
• 可以自訂打包邏輯的能力
• 適合大項目，無論是單頁還是多頁的 Web 應用程式

webpack 特點

代碼拆分
Webpack 有兩種組織模組依賴的方式，同步和非同步。非同步依賴作為分割點，形成一個新的塊。在最佳化了依賴樹後，每一個非同步區塊都作為一個檔案被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模組，但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模組。這樣，任何資源都可以成為 Webpack 可以處理的模組。
智能解析
Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模組形式是 CommonJS、 AMD 還是普通的 JS 檔案。甚至在載入依賴的時候，允許使用動態運算式 require("./templates/" + name + ".jade")。
外掛程式系統
Webpack 還有一個功能豐富的外掛程式系統。大多數內容功能都是基於這個外掛程式系統啟動並執行，還可以開發和使用開源的 Webpack 外掛程式，來滿足各式各樣的需求。
快速運行
Webpack 使用非同步 I/O 和多級緩衝提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

總結下來其主要的優勢：

1. 按需載入模組，按需進行懶載入，在實際用到某些模組的時候再累加式更新
2. webpack 是以 commonJS 的形式來書寫指令碼，但對 AMD/CMD 的支援也很全面，方便舊項目進行代碼遷移。
3. 能被模組化的不僅僅是 JS 了，能處理各種類型的資源。
4. 開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等。
5. 擴充性強，外掛程式機制完善

安裝

首先要安裝 Node.js， Node.js 內建了軟體包管理器 npm
用npm 安裝webpack

$ npm install webpack -g

此時 Webpack 已經安裝到了全域環境下，可以通過命令列 webpack -h 查看相關指令

通常我們會將webpack安裝到項目依賴，這樣就可以使用本地版本的webpack

//進入項目目錄//確定已有package.json，沒有就npm init 建立$ npm install webpack --save-dev//查看webpack 版本資訊$ npm info webpack//安裝指定版本$ npm install [email protected] --save-dev

如果要使用webpack開發工具，要單獨安裝 webpack-dev-server

$ npm install webpack-dev-server --save-dev

常用命令webpack

構建命令，webpack的常用參數

$ webpack --config webpack.min.js //另一份設定檔$ webpack --display-error-details //顯示異常資訊$ webpack --watch   //監聽變動並自動打包 $ webpack -p    //壓縮混淆指令碼，這個非常非常重要！ $ webpack -d    //產生map對應檔，告知哪些模組被最終打包到哪裡了

webpack-dev-server

webpack-dev-server是一個小型的node.js Express伺服器,它使用webpack-dev-middleware中介軟體來為通過webpack打包產生的資源檔提供Web服務。它還有一個通過Socket.IO串連著webpack-dev-server伺服器的小型運行時程式。webpack-dev-server發送關於編譯狀態的訊息到用戶端，用戶端根據訊息作出響應。

webpack-dev-server有兩種模式支援自動重新整理——iframe模式和inline模式

• 在iframe模式下：頁面是嵌套在一個iframe下的，在代碼發生改動的時候，這個iframe會重新載入
• 在inline模式下：一個小型的webpack-dev-server用戶端會作為入口檔案打包，這個用戶端會在後端代碼改變的時候重新整理頁面

使用iframe模式，無需額外配置，只需在瀏覽器輸入

http://localhost:8080/webpack-dev-server/index.html

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

1. 命令列： 在運行時，加上 --inline 選項

$ webpack-dev-server --inline

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

2. nodejs API 方式 ，需要手動把 webpack-dev-server/client?http://localhost:8080 加到設定檔的入口檔案處

webpac-dev-server支援Hot Module Replacement，即模組熱替換，在前端代碼變動的時候無需整個重新整理頁面，只把變化的部分替換掉

下章，就開始利用 Webpack 實現 前端項目的 自動構建部署！！

 

文章來自：http://www.cnblogs.com/sloong/p/5584684.html

webpack 介紹 & 安裝 & 常用命令