前端webpack workflow（一）——Webpack入門

做者：Jogis
原文連接：https://github.com/yesvods/Blog/issues/2
轉載請註明原文連接以及做者信息

模塊加載器

隨着前端項目愈來愈複雜（尤爲是大型SPA），以及命名空間混亂，一系列模塊加載器隨之而生。

Javascript模塊標準有：AMD 和 CommonJS

最有名的加載器有：RequireJS、SeaJS、Bowserify

那麼，有人就會問，這麼多模塊加載器，爲何還要重複發明輪子？

童鞋們騷安勿燥，下面爲你們娓娓道來 Webpack的特性以及使用入門。

Webpack

爲何須要另一款模塊加載器？

現有的模塊加載器，不能很好適配大型項目（大型單頁面應用程序）開發。開發這樣一款加載器最大緣由，就是爲了代碼分離以及靜態資源模塊化無縫接合。

儘管嘗試去拓展示有的模塊加載器，但最後發現不可能完成全部功能目標。

開發這一款加載器的目標

• 分離現有依賴樹，按需加載

• 高效保證第一次加載

• 靜態資源模塊化

• 第三方庫模塊化加載

• 實現加載器幾乎全部環節可配置性

• 適配大項目開發

Webpack特性功能？

代碼分離

Webpack有兩種依賴聲明方式：同步與異步。異步方式，將依賴分割成多個節點，而後每一個節點造成一個新的文件塊。通過優化後的文件塊樹，會以一個個文件形式分發出去（僅僅打包成一個大文件形式是很低效的，詳見）。

加載器插件

原生的Webpack只能處理JS文件，使用加載器插件，能夠將其餘資源專爲JS資源。經過這種方式來加載，每一種資源均可以被Webpack看做是一個模塊來加載。

智能模塊解析

Webpack內置一個智能加載模塊，能夠用於處理幾乎全部的第三方庫。它甚至能夠解析依賴聲明的表達式，好比 require("./templates" + name + ".jade")。Webpack會處理最多見的JS模塊標準：CommonJS 和 AMD。

插件系統

Webpack的最大特色，就是配套了很是豐富的插件系統。大部份內置特性功能都是基於這套插件系統。它可讓你根據須要自定義Webpack，將通常插件做爲開源項目發佈出去。

Webpack安裝

經過NPM包管理器

npm install -g webpack

項目中初始化Webpack

最優的方式就是，在項目中聲明Webpack依賴。經過聲明依賴，能夠選擇一個本地的Webpack版本，而不須要使用全局聲明的版本。

添加一個npm 配置文件package.json：

npm init

而後須要回答一系列問題。若是但願把本身項目發佈到npm上面，這些問題的回答很是重要。（若是不須要的話，一直回車就好啦）

安裝webpack、添加依賴到package.json

npm install webpack --save-dev

其中--save-dev就是聲明在開發階段須要用到webpack，而且自動把webpack依賴寫到package.json配置文件上面，生產環境就不須要安裝（上生產環境時候，webpack已經把項目打包好啦，不須要它老人家出馬了^_^）