webpack 介紹 & 安裝 & 經常使用命令

webpack 介紹 & 安裝 & 經常使用命令

webpack系列目錄

• webpack 系列 一：模塊系統的演進
• webpack 系列 二：webpack 介紹&安裝
• webpack 系列 三：webpack 如何集成第三方js庫
• webpack 系列 四：webpack 多頁面支持 & 公共組件單獨打包
• webpack 系列 五：webpack Loaders 模塊加載器
• webpack 系列 六：前端項目模板-webpack+gulp實現自動構建部署

本系列並不是所有原創，如非原創，正文篇首會註明轉載地址

基於webpack搭建純靜態頁面型前端工程解決方案模板， 最終形態源碼見github: https://github.com/ifengkou/webpack-template

正文

本篇部分摘錄於 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 webpack@1.31.x --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 實現 前端項目的 自動構建部署！！