想必大家對(duì)webpack都不會(huì)太陌生，他作為一個(gè)模塊打包工具伴隨著前端開發(fā)的一步步強(qiáng)大起來也深入開發(fā)者開發(fā)過程的必備工具之中颁虐。前端開發(fā)與其他開發(fā)工作的主要區(qū)別首先是前端開發(fā)是基于多語言、多層次的編碼和組織工作，其次前端產(chǎn)品的交付是基于瀏覽器的，他們通過增量加載的方式運(yùn)行至瀏覽器溉贿，如何在開發(fā)過程中很好的阻止這些碎片化的代碼和資源，并且保證他們?cè)跒g覽器端快速的加載和更新浦旱，就需要一個(gè)模塊化的系統(tǒng)宇色，在這里webpack就扮演著這么一個(gè)角色。
webpack是一個(gè)模塊打包工具颁湖，它是根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析宣蠕，然后將這些模塊按照制定的規(guī)則生成對(duì)應(yīng)得靜態(tài)資源。
接下來就是對(duì)webpack的簡單介紹：
1爷狈、webpack解決的主要問題：將依賴樹拆分成按需加載的塊植影；初始化加載的耗時(shí)盡量少裳擎；各種靜態(tài)資源都可以視為模塊涎永；將第三方庫整合成模塊的能力；可以自定義打包邏輯的能力鹿响；適合大項(xiàng)目羡微。
2、webpack的特點(diǎn)：
i惶我、代碼拆分：webpack有兩種組織代碼的形式分別是異步跟同步。異步依賴作為分割形成一個(gè)新的塊绸贡，再優(yōu)化了依賴樹之后，每一個(gè)異步模塊都作為一個(gè)文件被打包听怕。
ii、loader：原來webpack只能處理原生的js模塊尿瞭，但是loader轉(zhuǎn)換器的存在可以將各種類型的資源轉(zhuǎn)換成js模塊。這樣任何資源都可以成為webpack可以處理的模塊了声搁。
iii、智能解析：webpack可以將每一個(gè)第三方庫轉(zhuǎn)化為模塊進(jìn)行加載疏旨，不管他的模塊形式是CommonJS、AMD檐涝、還是普通的JS文件霞玄，并且在加載依賴的時(shí)候允許使用動(dòng)態(tài)表達(dá)式:require("./templates/" + name + ".jade")。
iv坷剧、插件系統(tǒng)：webpack自己有一個(gè)強(qiáng)大的插件系統(tǒng)，大多數(shù)的內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的喊暖，還可以開發(fā)和使用開源的webpack插件，來滿足各式各樣的需求陵叽。
v狞尔、快速運(yùn)行：webpack采用異步I/O和多級(jí)緩存提高運(yùn)行效率，這使得webpack能夠以令人難以置信的速遞快速增量編譯巩掺。
說了這么多關(guān)于webpack的介紹偏序，接下來我們就要開時(shí)學(xué)習(xí)這個(gè)強(qiáng)大的打包工具了。
首先進(jìn)行安裝我們一般都是采用npm來進(jìn)行安裝的胖替。
這是在全局環(huán)境下進(jìn)行安裝研儒，安裝完成后可以用webpack -h來進(jìn)行測(cè)試是否安裝成功。
接下來我們就以一個(gè)小例子來看一下webpack的運(yùn)行與配置是怎樣的独令，在那之前我們需要先安裝一下環(huán)境依賴和webpack的一些常用插件端朵。
首先我們來一起創(chuàng)建一個(gè)webpack的學(xué)習(xí)文件夾然后進(jìn)入項(xiàng)目目錄，通過npm init 初始化來創(chuàng)建package.json接下來安裝webpack依賴：
如果大家比較懶下面的命令可以一直回車他也會(huì)自動(dòng)給你創(chuàng)建完成的文件內(nèi)容大概是這樣子：
接下來就是我們需要安裝的webpack依賴燃箭，以及指定版本的webpack：
指定版本webpack安裝命令：
如果需要一些其他的webpack插件的話我們還可以這樣安裝冲呢，我們這個(gè)小例子中還用到webpack-dev-server所以我們就安裝一下：
這樣我們基本的依賴以及插件安裝已經(jīng)結(jié)束，接下來我們就需要做一些用來顯示在瀏覽器中的東西了招狸，首先一個(gè)大家熟的不能再熟的index.html代碼用來展示我們這個(gè)小例子的結(jié)果：
然后我們需要?jiǎng)?chuàng)建一個(gè)js文件用來執(zhí)行js代碼（entry.js）：
這樣我們就完成了這個(gè)基本的小例子敬拓，直接運(yùn)行然后打開index.html查看結(jié)果：
接下來就是用瀏覽器打開查看瀏覽器的結(jié)果了：
這樣我們的第一個(gè)小例子就結(jié)束了，然后我們就可以乘勝追擊接著往下學(xué)習(xí)跟具有挑戰(zhàn)的東西了裙戏。
參考鏈接：webpack中文指南乘凸、webpack參考文檔
下期預(yù)告：模塊化引入、loader轉(zhuǎn)換器挽懦、配置文件詳細(xì)解析翰意，敬請(qǐng)期待！
