前端構建工具 webpack

一.自我初級認知  （是什麼？     能幹什麼，有卵用？       有選擇爲何要選你？（比較優點在哪） ）     適合的纔是最好的

      模塊打包器（module bundler）     根據項目需求合併代碼，而且支持按需加載。

　　1.將混在頁面中的圖片文件、js文件、css文件抽取出來，解除依賴。

　　2.模塊系統主要解決模塊的定義、依賴和導出.

      3.全局做用域下，也就是定義在 window 對象中。

      4.webpack實現的功能:

　　　　a：將依賴樹拆分紅按需加載的塊

　　　　b：初始化加載的耗時儘可能少

　　　　c：各類靜態資源均可以視做模塊

　　　　d：將第三方庫整合成模塊的能力

　　　　e：能夠自定義打包邏輯的能力

　　　　f：適合大項目，不管是單頁仍是多頁的 Web 應用

　　5.編譯後緩存到內存中去。

　　6.webpack的理念是基於項目處理的，把對應的文件格式給對應的loader處理，而後你就不用管了，它會決定怎麼壓縮，編譯。  

         配置文件：用規定的語法描述你要幹什麼！  怎麼幹是工具的事！    就像給方法傳遞參數同樣。

 

二：webpack配置

      1.entry：配置要打包的文件的入口;能夠配置多個入口文件

      2.output:配置輸出文件的路徑，文件名。  出口

　　3.resolve:配置文件後綴名        

　　4.module(loaders)： 配置要使用的loader（注意loaders的處理順序是從右到左的）     編譯過程當中加載的資源攔截作處理

　　5.plugins： 配置要使用的插件

      配置目錄結構和詳解：  網上看別人的，github！    http://www.imooc.com/article/4617

　　

　　

      

 

 

三：學習參考資源

     http://www.jirengu.com/app/watch/1433/1?vsum=2（入門視頻哦！至關的詳細）

      0.https://zhuanlan.zhihu.com/p/24888828?refer=study-fe（飢人谷不錯的博客哦）

　　1.http://www.jianshu.com/p/b95bbcfc590d     http://www.cnblogs.com/zhengjialux/p/5861845.html (基礎教程)

　　2.http://webpackdoc.com/module-system.html(官方中文文檔：簡單易懂，至關不錯)

      3.https://webpack.js.org/concepts/（官網，很是的不錯哦！ 練習英文閱讀能力）

         http://webpack.github.io/docs/list-of-plugins.html（同上哦）

         http://survivejs.com/webpack/webpack-compared（構建工具比較文檔）

      4.https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine(知乎)

　　5.http://www.open-open.com/lib/view/open1471590235833.html（項目發佈必看）

      6.http://www.cnblogs.com/liuyt/p/5810042.html(css autoprefixer!)

         http://blog.csdn.net/github_26672553/article/details/52107165

      7.http://www.cnblogs.com/tugenhua0707/p/4793265.html（有實例demo哦，不錯）

      8.https://segmentfault.com/a/1190000002551952（入門必看哦！ 這個至關的nice）

 

 

四：遇到的坎兒

      1.人必須首先學會靠本身！不能期望別人！ 成年人了！

      2. webpack沒法生成目錄和文件？ 

          答：命令的問題； webpack纔是編譯處理哦！  webpack-dev-server處理後編譯的結果在內存中。

　　3.讀人家的webpack配置文件哦！ 不懂得查資料學習！
　　4.看報錯信息 認真的看！

　　   

 

其餘同類工具：

1.gulp  grunt

2.http://fis.baidu.com/fis3/docs/beginning/release.html#/docs/beginning/release.html#CssSprite%E5%9B%BE%E7%89%87%E5%90%88%E5%B9%B6  （百度的哦 文檔是中文的）

 

 

 

 

 

 

 

 

 

 

 

疑惑：

1.自動化構建工具、模塊規範、模塊化管理工具 ？ 

   答：會用 Less 去寫 CSS，會用 Jade 去寫 HTML，會用 Browserify 去模塊化、爲非覆蓋式部署的資源加 MD5 戳等等。全部的一切，若是用手動來作，簡直要瘋              了！而自動化構建工具，就是爲咱們完成這一套重複而機械的工做的。

          https://www.zhihu.com/question/35595198/answer/67223812

          https://segmentfault.com/q/1010000004217785/a-1020000004217853

2.npm？   npm倉庫？   

3.鏡像？  

4.語法糖： duck type，人本接口，最小接口，約定優於配置，廣義來說都是一些思想上的"語法糖"。

                增長程序的可讀性，從而減小程序代碼出錯的機會。