webpack學習筆記--配置entry

 Entry

 entry 是配置模塊的入口，可抽象成輸入，Webpack 執行構建的第一步將從入口開始搜尋及遞歸解析出所有入口依賴的模塊。

 entry  配置是必填的，若不填則將導致 Webpack 報錯退出。

context

Webpack 在尋找相對路徑的文件時會以 context 為根目錄，context 默認為執行啟動 Webpack 時所在的當前工作目錄。 如果想改變 context 的默認配置，則可以在配置文件里這樣設置它：

module.exports = {
  context: path.resolve(__dirname, 'app')
}

注意， context 必須是一個絕對路徑的字符串。 除此之外，還可以通過在啟動 Webpack 時帶上參數 webpack --context 來設置 context。

之所以在這里先介紹 context，是因為 Entry 的路徑和其依賴的模塊的路徑可能采用相對於 context 的路徑來描述，context 會影響到這些相對路徑所指向的真實文件。

Entry 類型

Entry 類型可以是以下三種中的一種或者相互組合：

類型	例子	含義
string	'./app/entry'	入口模塊的文件路徑，可以是相對路徑。
array	['./app/entry1', './app/entry2']	入口模塊的文件路徑，可以是相對路徑。
object	{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}	配置多個入口，每個入口生成一個 Chunk

如果是  array  類型，則搭配  output.library  配置項使用時，只有數組里的最后一個入口文件的模塊會被導出。

Chunk 名稱

Webpack 會為每個生成的 Chunk 取一個名稱，Chunk 的名稱和 Entry 的配置有關：

• 如果 entry 是一個  string  或  array ，就只會生成一個 Chunk，這時 Chunk 的名稱是  main ；
• 如果 entry 是一個  object ，就可能會出現多個 Chunk，這時 Chunk 的名稱是  object  鍵值對里鍵的名稱。

配置動態 Entry

假如項目里有多個頁面需要為每個頁面的入口配置一個 Entry ，但這些頁面的數量可能會不斷增長，則這時 Entry 的配置會受到到其他因素的影響導致不能寫成靜態的值。其解決方法是把 Entry 設置成一個函數去動態返回上面所說的配置，代碼如下：

// 同步函數
entry: () => {
  return {
    a:'./pages/a',
    b:'./pages/b',
  }
};
// 異步函數
entry: () => {
  return new Promise((resolve)=>{
    resolve({
       a:'./pages/a',
       b:'./pages/b',
    });
  });
};