前端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已經把項目打包好啦，不需要它老人家出馬了^_^）