前端工程化與webpack

（1） 前端工程化

  近幾年來，前端領域飛速發展，前端的工做早已再也不是切幾張圖，寫幾個頁面那麼簡單，項目比較大時，極可能會多人協同開發，模塊化，組件化，CSS預編譯等技術也被普遍的使用。前端自動化（半自動化）工程已經成爲如今的主流。前端工程化主要解決一下問題

• Javascript、CSS 代碼的合併和壓縮
• CSS 預處理：Less，Sass, Stylus的編譯
• 生成雪碧圖
• ES6 轉ES5 語法
• 模塊化
  ...

（2）Gulp 與 Webpack

  相信不少小夥伴都不只知道gulp和webpack，還了解grunt，他們有什麼區別呢？

  通過Gulp和Grunt合併壓縮後的代碼仍然是你寫的代碼，只是局部變量名被替換了，一些語法作了轉換而已，總體的內容並沒發生變化。

  而webpack打包後的代碼已經不僅是你寫的代碼，其中夾雜了不少webpack自身的模塊處理代碼。在編譯過程當中，webpack工程會自動載入一些內容。

 （3）Webpack 與工程

  Webapack （Web網絡pack包）主要適用場景是 單頁面富應用(SPA---SinglePageApplication)，SPA一般是由一個html文件，和一堆按需加載的js組成。webpack的依賴關係圖以下所示：

    

   左側：moduls with dependencies（具備依賴性的模塊）          右側：static assets（靜態資源/資產）

 

 

 

參考：

（1）入門Webpack，看這篇就夠了：https://blog.csdn.net/linyouhappy/article/details/52567058（2）

webpack中loader加載器的使用及原理(經常使用的loader加載器)：https://blog.csdn.net/songshuguowang/article/details/85263587

 

 

 

 

 

 

 

.