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