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.js
6      }
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的值是一個正則表達式，它的作用是將當前loader用於什麽文件，這裏正則表達式就是用來匹配你需要轉換的文件類型，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新手入門教程(學習筆記)