wepack學習筆記

webpack突出點是程式碼分割，模組化。包括entry、output、loaders、plugins。其中loaders中有很多規則，用loaders出來，loaders又包含與編譯相關、樣式相關、檔案相關。主要是用來處理檔案、把這些檔案轉化成對應模組。plugins參與整個打包過程，打包最佳化和壓縮。還可以配置編譯時的變數。

loaders可以讓webpack處理那些非js檔案，如.vue檔案（webpack只能理解js）

--D和--S的區別？

--D等價於 --save-dev

--S是--save的縮寫

--D的安裝依賴用於開發環境，儲存在devDependencies

--S依賴的檔案用於生產環境，也是線上環境，整個專案必須依賴的檔案，例如jQuery。

目前的webpack已經到了4時代，以前的一些命令列可能不能 用了，例如：

webpack demo.js bundle.demo.js

就會報錯。

現在要用

webpack demo.js -o bundle.demo,js

你在執行時還可能報需要你安裝webpack-cli或者wenpack-command.這時候你需要全域性安裝webpack-cli。然後在使用npm install webpack --save-dev即可

babel Runtime transform區域性墊片，為開發框架準備

babel-polyfill全域性墊片，為開發應用準備

最後，webpack用來打包最終還是生產html，css，js，無非裡面打包會出現程式碼分割，模組化，提取公共程式碼，把打包後的css和js放在html中。例如用style-loader就可以把css放在html 的meta中，程式碼公共提取用commonchunkpligin。最後還可以配合gulp，進行自動化部署。gulp的主要本領是用來排程，編譯還是要靠webpack。gulp可以讓你生成的程式碼透過執行命令自動上傳的服務端。gulp的核心是管線化思想。用pipe一層層的管道來處理。現在webpack到了4時代，程式碼分割和懶載入已經很成熟，它的主要目的還是未來讓頁面更快的展現出來。提高首屏的速度。

模組熱更新和瀏覽器重新整理不是一回事，模組熱更新是更高階別的重新整理瀏覽器。可以在你修改程式碼後，不用手動重新整理瀏覽器，自動看到修改後的結果。

在wepack中經常用到的是commonjs和es6語法規範

commonjs特點：動態載入，每個模組都是一個物件，因為只有在執行的時候才能得到這個物件，導致完全沒有辦法在編譯時做“靜態最佳化”（例如做型別校驗）。

es6的特點：靜態解析。你看每個es6模組在使用之前都要提前引入。es6中的模組並不是物件，而是透過export命令顯示指定輸出程式碼，再透過import命令輸入。這種叫編譯時載入，或者叫靜態載入，由於是在編譯時就完成模組載入，比commonjs效率要高。因為commonjs是執行時載入。程式碼執行是打包，編譯、執行。載入的也不是整個模組。因為你在es6模組中經常會看見一個模組中會有好多export匯出。

我們可以從上述看到，es6的特點是靜態解析，commonjs的特點是動態解析。es6要想實現按需載入，可以用tree-shaking(樹搖晃，把枯葉子搖下來，也就是把無用的程式碼去除)。可以做到減小打包後程式碼的體積。縮小應用的載入時間。