webpack 入門指南

webpack，一個模塊打包機。

學習新東西的時候第一件事不是看官方文檔，而是知道它是什麼，能解決什麼問題，怎麼使用。

相比jQuery和vue而言，webpack不能算是一個框架，更像是一個工具，由於它不參與你的項目業務代碼。經過配置依賴關係圖和控制配置信息，本來複雜冗餘地項目文件的引用瞬間變得輕鬆簡單。

webpack require anything的方式是經過各類各樣的loader及plugins實現的，全部的文件均可以視爲模塊，你只須要配置好配置文件，執行webpack -p命令後，一切都是那麼美好。

順帶說一下，開發過程當中你還可使用webpack-dev-server，構建服務器環境，自動編譯，自動刷新，解放你的F5.那種酸爽，誰用誰知道。我說的是工程項目，一兩個文件在服務器環境裏跑，要麼用webstorm，要麼用browser-sync,sublime配置失焦保存便可。

webpack其餘都不怎麼重要，配置文件最重要，或者換一句話說，配置信息的那個對象很重要，那是核心。

野路子講究快準狠，拿到一份webpack的配置文件，查詢api說明書，基本上就能入門了。

webpack配置文件是經過config命令指向的，默認值是項目根目錄下的webpack.config.js文件。
新建打開以後，寫下：
var config = {};
module.exports config;

因而config這個對象即成爲webpack的核心配置承載體了。爲了行文方便我就直接用config來代指webpack配置了。

config有如下幾個直接子屬性：

entry 入口配置，這裏的程序的起點，配置上頁面的js文件便可，字符串，字符串數組，字符串對象數組根據你是SPA仍是其餘多頁而定。

output 出口配置 這裏配置打包以後的文件存儲位置，這個屬性的屬性值也是一個對象，output.path定義存儲位置，output.filename定義打包後的文件名，也能夠具體化存儲路徑。

external 外部依賴的聲明，好比外部經過cdn引入的jQuery，bootstrap之類的，在這裏配置後便可以看成全局模塊全局使用了

resolve 解析說明，通常用來自定義一些解析規則，好比項目目錄別名的配置，不用在點點槓的翻目錄了，這個是經過alias配置實現。

modules 模塊信息，用來放各類loader

plugins 插件信息，用來放各類插件

熟悉這幾個config的屬性webpack基本上就算入門了。碰到不熟悉的地方仍是針對性地找官方文檔查對應的API。