Webpack新手入門教程(學習筆記)

標籤：意思   效率   決定   參數   工具   頁面   color   運算式   壓縮檔   

Webpack入門教程(學習筆記)

1、簡介

此教程涉及不深入，併除去了很多複雜的東西，記錄也堅持以最簡單為主，讓初學者大概對webpack有一個簡單的系統認識，更好的去進一步深入學習webpack。

 

Webpack是一個Javscript的打包程式，webpack會自動分析每個模組之間的依賴，然後將這些依賴統一打包成一個或多個檔案。

 

webpack最強悍的地方是可以通過官方、第三方的外掛程式以及載入器(loader)來實現對各種檔案的解析、編譯。

 

Webpack最重要的四個核心概念：入口(entry)、輸出(output)、載入器(loader)、外掛程式(plugin)，下面我以做筆記的方式盡量說明幾個概念的意思，如果想深入或者筆記中有不太明白的地方，可以到官方網站的文檔中去查看。

 

2、入口(entry)

webpack的入口就相當於一個網頁的index檔案，有了入口檔案，這樣webpack才知道從何下手，webpack會根據這個入口檔案去分析入口檔案所依賴的所有檔案，然後將這些所有的依賴檔案打包成一個或者多個檔案。

 

webpack提供了單個入口文法、對象文法。單個入口文法也是最簡單的一種，只有一個入口檔案，即一個進一個出。比如下面的這一種。

1 {2   entry: ‘./index.js‘3 }

對象文法主要是針對多個頁面的應用程式，告訴webpack有三個入口檔案，當打包完成的時候也是三個檔案，這三個檔案相互獨立，每個檔案只包含自己所依賴的檔案。比如下面這樣：

1  {2   entry: {3    hello1: ‘./hello1.js‘,4    hello2: ‘./hello2.js‘5   }6  }

 

 

3、輸出(output)

webpack提供了output屬性，來控制webpack如何把編譯好的檔案寫入到硬碟中，輸入和輸出是對應的，有輸入就有輸出。但是必須注意一點，可以存在多個輸入，但是只能存在一個輸出，那怎麼來輸出多個獨立的編譯好的檔案呢？webpack中當然有應對的機制。

 

webpack要求output屬性為對象，並且必須包含兩個屬性：filename、path。顧名思義filename即輸出檔案的檔案名稱，而path則為輸出檔案的絕對路徑(注意,path必須為決定路徑)。

 

單個入口output屬性寫法：

1 {2     entry: ‘./index.js‘,3     output: {4     　　path: path.resolve(__dirname, ‘app‘), //path為nodejs自身的庫。__dirname為nodejs在運行過程中的一個環境變數，裡面是當前檔案夾的完整目錄名。resolve方法是把相對路徑的app目錄解析為一個決定路徑。5 6   　　　filename: ‘bundle.js‘7  }8 }

 

webpack內建了多個變數來應對多個入口檔案，如[name]、[hash]、[id]、[chunkhash]，通過變數來保證每個檔案的唯一性來達到產生多個檔案，在產生過程中webpack會把這幾個變數替換為相應的字串用於保證檔案的唯一性。

 

多個入口output屬性寫法：

1 {2     entry: ‘./index.js‘,3     output: {4         path: path.resolve(__dirname, ‘app‘),5         filename: [name]-[hash]-bundle.js6      }7 }

 

 

4、載入器(loader)

loader可以對不同類型的檔案進行編譯轉換，比如jsx、typescript直接拿在瀏覽器上運行是不能啟動並執行，那麼我們在編寫程式的時候需要藉助jsx以及typescript等高效的庫來提高我們編寫程式的效率，但是我們又需要能正常使用，如果每種檔案類型我們都通過一種轉換工具，那麼就顯的很麻煩，所以laoder就是來處理這樣的工作。

 

首先在使用loader的時候我們需要安裝相應的外掛程式，比如es2015，那我們安裝babel-loader，如果是css，那我們安裝css-loader，通過下面的module屬性裡面的rules數組來對需要轉換的檔案設定loader。

 

 1 { 2     entry: ‘./index.js‘, 3     output: { 4         path: path.resolve(__dirname, ‘app‘), 5         filename: [name]-[hash]-bundle.js 6     }, 7     module: { 8         rules : [ 9             {test: /\.js$/, use: ‘babel-loader‘}10          ]11      }12 }        

 

上面的rules是一個數組，每個元素是一個對象，對象裡麵包含了兩個屬性test、use，test的值是一個Regex，它的作用是將當前loader用於什麼檔案，這裡Regex就是用來匹配你需要轉換的檔案類型，use是當前匹配到的檔案用什麼載入器來轉換、編譯。

 

有三種方式來使用loader載入器

1、webpack設定檔

2、require語句中使用

3、通過命令列使用

 

第一種上面我們已經說了，下面簡單的介紹一下第二種和第三種，第二種使用方法是我們在require或者import檔案的時候可以直接使用，比如下面的代碼：

 

1 require(‘babel-loader!./hello.js‘)

或者

1 Import(‘babel-loader!./hello.js‘)

 

第三種方式是直接通過webpack提供的命令列工具—module-bind使用，比如下面的代碼：

1 webpack —module-bind ‘js=babel-loader‘

 

5、外掛程式(plugin)

外掛程式用於解決loader無法解決的事情，比如給每個js檔案進行添加著作標記、壓縮檔等功能，每個外掛程式都可能有參數選項，每個外掛程式在使用的時候也必須使用new操作符來建立一個外掛程式的執行個體。外掛程式通過plugins屬性來設定，plugins是一個數組，每個元素代表一個外掛程式的執行個體。因為外掛程式有官方的還有第三方的，所以不會一一去說怎麼使用，只是給大家簡單示範一下，大家需要用到哪個外掛程式再去查這個外掛程式的api。

 

 1 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); 2 //首先要使用外掛程式，必須先引入外掛程式 3   4 { 5 　　entry: ‘./index.js‘, 6 　　output: { 7　　　　path: path.resolve(__dirname, ‘app‘), 8　　　　filename: [name]-[hash]-bundle.js 9  　　},10　　 module: {11   　　rules : [12    　　　　{test: /\.js$/, use: ‘babel-loader‘}13   　　]14  　　},15  　 plugins: [16   　　new HtmlWebpackPlugin({telmplate : ‘./index.html‘})  //通過plugins來使用你需要使用外掛程式。17  　　]18 }

6、總結

通過上面的學習，你可以瞭解到webpack的四個核心，入口、輸出、載入器、外掛程式，入口就是你要編譯的是哪個檔案，指定了過後webpack會自行尋找依賴的檔案打包編譯。輸出就是編譯轉換好了過後把檔案寫入到硬碟的哪裡。載入器就是對不同類型的檔案轉換，從而讓瀏覽器能直接運行。外掛程式做的是loader無法解決的事情。

 

 

其實webpack的配置並沒有想象中的那麼複雜，webpack的設定檔就是一個js檔案，只要對webpack有一個系統的認識後，你就知道我該從哪裡下手，該從哪裡入手了。

 

 

 

 

Webpack新手入門教程(學習筆記)