webpack入門學習筆記01 —— webpack基本簡介

1. 寫在前面

不少從事前端開發的程序員，都會接觸到 webpack 很是熟悉的概念，可是我想不少人對webpack只是只知其一;不知其二，知道這是一個打包器，能夠將咱們編寫的Vue代碼、React代碼打包編譯成原生的JS代碼，方便瀏覽器識別。

可是對於webpack更底層的知識，好比：如何配置webpack，webpack爲何能夠對咱們的代碼進行打包編譯等，瞭解甚少。

因此藉着此次學習webpack的機會，寫一些文章，從一個前端小白的角度出發，一步步瞭解webpack的相關知識。但願這些文章能夠對那些前端小白有多幫助。寫得很差的地方，也請你們多多批評。

2. webpack基本簡介

什麼是webpack呢，下面咱們引出 官方定義 ：

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

說的直白一點，就是講咱們的代碼進行編譯打包，變成可以被瀏覽器識別的前端腳本。就拿一個Vue項目爲例：

一開始咱們是用 Vue-cli腳手架 快速搭建一個項目，隨後在項目中都是採用Vue語法來編寫咱們的項目，不只如此，咱們還會使用 ES6 語法，還會使用SCSS等CSS預處理器等等。

這些語法咱們是熟悉的，可是瀏覽器不認識呀，瀏覽器可以識別的是原生JS語法，並且就目前狀況來講，只能識別ES5語法，不能識別咱們使用的ES6語法。這就意味着，咱們的Vue項目是跑不起來的。這該怎麼辦呢？

這個時候webpack就開始發揮它的做用了，webpack經過分析Vue語法、理清代碼模塊以前的依賴關係、分析SCSS預處理器、分析項目中引用的圖片等靜態資源等，將這些瀏覽器不識別的語法進行打包編寫編譯，最終打包輸出 .js、.css、.jpg、.png 等可以被瀏覽器識別的語法和文件。如此一來，咱們的項目就能夠順利地在瀏覽器上面跑起來了。

3. webpack的做用總結

結合上面的簡單介紹，咱們來總結一下webpack的做用：

代碼轉換

webpack能夠將ES6語法轉換爲ES5語法，能夠將LESS、SASS語法轉換成CSS語法

文件優化

在webpack打包的過程當中，能夠合併文件，壓縮文件體積

代碼分割、模塊合併

在開發的過程當中，將一些公共的模塊進行抽離，造成單獨的模塊，方便其餘模塊進行調用

自動刷新

即咱們熟悉的熱更新，在開發過程當中，webpack會幫咱們啓動一個本地服務，每當產生新代碼的時候，該服務會自動刷新，然咱們看到最新的頁面

代碼校驗

在開發過程當中，webpack能夠幫助咱們檢查代碼語法規範，減小bug的數量

自動發佈

項目開發完成以後，咱們能夠藉助webpack幫助咱們自動發佈代碼，部署到服務器上

4.後記

以上就是webpack學習筆記的開篇語，但願接下來的一系列筆記，對你理解webpack會有所幫助。你們加油！

下一篇: webpack入門學習筆記02 —— 初始化一個webpack項目