深刻淺出webpack學習(2)--Entry

如今介紹一下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。

entry的路徑和其餘依賴的模塊的路徑可能採用相對於context的路徑來描述，context會影響到這些相對路徑所指向的真實文件。

Entry類型

• string類型

格式：
entry: './app/entry'

表示入口模塊的文件路徑，能夠是相對路徑。

• array類型

格式：
entry: ['./app/entry1', './app/entry2']

表示入口模塊的文件路徑，能夠是相對路徑。

• object類型

格式：
entry: {
    a: './app/entry-a',
    b: ['./app/entry-b1', './app/entry-b2']
}

配置多個入口，每一個入口生成一個Chunk。

若是是array類型，則搭配output.library配置項使用時，只有數組裏的最後一個入口文件會被導出。

Chunk名稱

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

1. 若是entry是一個string或者array，就只會生成一個chunk，這個chunk的名稱是main;
2. 若是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'
        })
    })
}