webpack使用的一些見解

    最近在使用webpack來做爲前端開發的自動構建工具，對webpack有一些理解，這裏跟你們分享一下。

    1、爲何要用webpack

    一開始是處於好奇和學習的心態，可是在瞭解和學習的過程當中發現，做爲一個前端開發，由於下面的這幾點，我以爲仍是頗有必要的。

    1.webpack 可以把amd cmd和原生的js模塊打包到一塊兒，像這樣的工具在前端混亂時代裏面是一個不錯的選擇。

    2.webpack 可以把css image html等打包成js，就這個功能，對於實現組件化 模塊化的前端開發也是一個很不錯的選擇，也許你會以爲不少方法均可以實現，可是我以爲沒有這個那麼的輕鬆。

    3.webpack 可以編譯less sass coffee  等css js這些預編譯語言，可以進行css js image壓縮，生成hash值來做爲版本區分，這個絕對是生產環境的好助手，由於這個解決了生產環境下代碼解析、更新緩存等問題。

    4.webpack 對於reactjs的用戶來講，簡直是神通常的搭檔，爲何？由於基於上面的三點，並且jsx的解析和es6的應用都是讓你着迷的地方。

 

    2、何時用webpack

    webpack並非全部的場景都適合，從資料和這段時間的摸索來看，場景的應用能夠分爲下面的狀況：

    1.單頁面應用(spa)應該是比較合適的場景，由於webpack主張把全部東西打包一塊兒，對於一個單頁面應用來講這是再合適不錯了。並且你發現不少網上的關於webpack的距離基本的例子都是打包成一個文件，一個或多個入口卻只有一個出口。網上的例子不少，這裏就再也不舉例了。

    2.react相關的應用，包括reactjs、 react native這些，不管是從組件化開發，仍是打包編譯，webpack都是最佳的選擇。

    3.移動端網頁開發，用這個也是不錯的選擇，移動端網頁開發通常偏向於簡約，組件化，這個都是webpack輕鬆作到的，還有就是在移動端靜態文件緩存比較嚴重，而webpack中文件添加hash的功能能夠解決這個事情。

    值得注意的是：在一些中大型的電商網站，頁面結構比較複雜的網站，webpack的選擇須要慎重，由於考慮到版本切換、灰度發佈等功能，webpack處理起來並非那麼的合適，這些狀況下能夠結合gulp  grunt這來來用。因此使用是要分狀況的而不是一味的由於你們用而用。

 

    3、webpack 須要注意的問題

    1.webpack 能根據配置來自動加載模塊，可是不能自動安裝須要的模塊，也不是內置了你須要的模塊，好比 jsx-loader，不是內置的，webpack也不會自動幫你安裝，須要你本身執行 " npm i jsx-loader " 命令來安裝。

    2.webpack 目前是不能處理雪碧圖的，估計是做者的初衷是打包一切，而不是分散處理。因此要處理雪碧圖這樣的需求要用其餘的方法。

    3. webpack 在watch狀態下是不可以監聽新增文件的，本人用的1.13.0版本是沒有實現這個功能的，若是要實現估計仍是找一下其餘的插件或者方法，可是針對webpack自己來講是沒有這個功能的，不過能夠考慮跟gulp grunt這些結合使用。

    4.webpack 在watch狀態下回隨着文件修改並且內存增長，這點好像是不少人都知道的，而解決的方式是用gulp來監聽，不知道還有沒有其餘的方法，或者以後webpack會不會改善這些。