從開(kāi)發(fā)文件到生產(chǎn)文件
有一天我突然意識(shí)到一個(gè)問(wèn)題，在使用react框架搭建應(yīng)用時(shí)，我使用到了sass/less，JSX模版以及ES6的語(yǔ)法在編輯器下進(jìn)行開(kāi)發(fā)，使用這些寫法是可以提高開(kāi)發(fā)的效率?？墒菫g覽器它本身是并不能夠“理解”這些語(yǔ)法的呀。就像下面這張圖： 
在開(kāi)發(fā)代碼文件 --> 生產(chǎn)代碼文件的轉(zhuǎn)換過(guò)程中，我們到底需要做些什么呢？沒(méi)錯(cuò)，這一切都和webpack(或gulp)有關(guān)： 
轉(zhuǎn)一張webpack官網(wǎng)的圖,webpack能把less/sass文件,json文件，乃至css文件，全都打包成js文件和靜態(tài)資源文件（圖片）
webpack和gulp的共同作用及兩者的區(qū)別： webpack和gulp本質(zhì)上并不是同一類型工具，但它們都能完成以下任務(wù)：
webpack:一個(gè)模塊化工具（a module bundle）gulp:一個(gè)任務(wù)運(yùn)行器（a Task Runner） 在用react/vue/angular搭建單頁(yè)面應(yīng)用時(shí)，我們可以用webpack代替gulp的工作，方便而快捷。兩者具體的區(qū)別，在這里不多贅述，大家自行查閱資料。下面我主要介紹一下webpack的使用 除了利用webpack實(shí)現(xiàn)開(kāi)發(fā)代碼 --> 生產(chǎn)代碼的轉(zhuǎn)換，我們?yōu)槭裁匆盟銎渌恍┕ぷ?，比如文件打包（文件合并），JS/css壓縮呢？
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式