在一切流程的最開始，我們需要指定一個(gè)或多個(gè)入口（entry），也就是告訴Webpack具體從源碼目錄下的哪個(gè)文件開始打包。下面本篇文章就來帶大家深入了解一下webpack核心概念中的入口配置（entry），希望對(duì)大家有所幫助！

如果把工程中各個(gè)模塊的依賴關(guān)系當(dāng)作一棵樹，那么入口（entry）就是這棵依賴樹的根

這些存在依賴關(guān)系的模塊會(huì)在打包時(shí)被封裝為一個(gè)chunk。那chunk是什么呢？

chunk字面的意思是代碼塊，在Webpack中可以理解成被抽象和包裝過后的一些模塊。它就像一個(gè)裝著很多文件的文件袋，里面的文件就是各個(gè)模塊，Webpack在外面加了一層包裹，從而形成了chunk：

根據(jù)具體配置不同，一個(gè)工程打包時(shí)可能會(huì)產(chǎn)生一個(gè)或多個(gè)chunk。

工程中可以定義多個(gè)入口，每一個(gè)入口都會(huì)產(chǎn)生一個(gè)結(jié)果資源

比如我們工程中有兩個(gè)入口src/index.js和src/lib.js，在一般情形下會(huì)打包生成dist/index.js和dist/lib.js。

在一些特殊情況下，一個(gè)入口也可能產(chǎn)生多個(gè)chunk并最終生成多個(gè)bundle

入口(entry)

參數(shù)：Entry

• entry 是配置模塊的入口，可抽象成輸入，Webpack 執(zhí)行構(gòu)建的第一步將從入口開始搜尋及遞歸解析出所有入口依賴的模塊
• entry 配置是必填的，若不填則將導(dǎo)致 Webpack 報(bào)錯(cuò)退出

module.exports = { 	entry:'./src/index.js', //表示入口文件，即從index.js進(jìn)入我們的項(xiàng)目 };

①Entry 類型

如果是 array 類型，則搭配 output.library 配置項(xiàng)使用時(shí)，只有數(shù)組里的最后一個(gè)入口文件的模塊會(huì)被導(dǎo)出

②Chunk 名稱

Webpack 會(huì)為每個(gè)生成的 Chunk 取一個(gè)名稱，Chunk 的名稱和 Entry 的配置有關(guān)：

• 如果 entry 是一個(gè) string 或 array ，就只會(huì)生成一個(gè) Chunk，這時(shí) Chunk 的名稱是 main ；
• 如果 entry 是一個(gè) object ，就可能會(huì)出現(xiàn)多個(gè) Chunk，這時(shí) Chunk 的名稱是 object 鍵值對(duì)里鍵的名稱

③Entry 配置動(dòng)態(tài)

假如項(xiàng)目里有多個(gè)頁面需要為每個(gè)頁面的入口配置一個(gè) Entry ，但這些頁面的數(shù)量可能會(huì)不斷增長，則這時(shí) Entry 的配置會(huì)受到到其他因素的影響導(dǎo)致不能寫成靜態(tài)的值。其解決方法是把 Entry 設(shè)置成一個(gè)函數(shù)去動(dòng)態(tài)返回上面所說的配置，代碼如下：

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

參數(shù)：context

Webpack 在尋找相對(duì)路徑的文件時(shí)會(huì)以 context 為根目錄，context 默認(rèn)為執(zhí)行啟動(dòng) Webpack 時(shí)所在的當(dāng)前工作目錄。 如果想改變 context 的默認(rèn)配置，則可以在配置文件里這樣設(shè)置它：

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

注意， context 必須是一個(gè)絕對(duì)路徑的字符串。 除此之外，還可以通過在啟動(dòng) Webpack 時(shí)帶上參數(shù) webpack –context 來設(shè)置 context

單個(gè)入口文件配置

用法：entry:string|Array<string>

1、簡寫語法

webpack.config.js

//由于是單個(gè)，所以可以簡寫成： module.exports = {   entry: './main.js' };

上面的入口配置寫法其實(shí)是下面的簡寫

module.exports = {   entry: {     main: './main.js'   } };

2、數(shù)組語法

module.exports = {   entry: {     main:['./main.js','./main2.js']   } };

傳入一個(gè)數(shù)組的作用是將多個(gè)資源預(yù)先合并，在打包時(shí)Webpack會(huì)將數(shù)組中的最后一個(gè)元素作為實(shí)際的入口路徑

在使用字符串或數(shù)組定義單入口時(shí)，并沒有辦法更改chunk name，只能為默認(rèn)的“main”。

多個(gè)入口文件配置

用法：entry: {[entryChunkName: string]: string|Array}

對(duì)象語法

module.exports = {   entry: {     app: './src/app.js',     vendors: './src/vendors.js'   } };

這會(huì)比較繁瑣。然而這是應(yīng)用程序中定義入口的最可擴(kuò)展的方式。

“可擴(kuò)展的 webpack 配置”：可重用并且可以與其他配置組合使用。這是一種流行的技術(shù)，用于將關(guān)注點(diǎn)從環(huán)境(environment)、構(gòu)建目標(biāo)(build target)、運(yùn)行時(shí)(runtime)中分離。然后使用專門的工具（如 webpack-merge）將它們合并。

應(yīng)用場景

1、單頁應(yīng)用

無論是框架、庫，還是各個(gè)頁面的模塊，都由app.js單一的入口進(jìn)行引用。這樣做的好處是只會(huì)產(chǎn)生一個(gè)JS文件，依賴關(guān)系清晰。

module.exports = {   entry: './src/app.js' };

這種做法也有弊端，即所有模塊都打包到一起，當(dāng)應(yīng)用的規(guī)模上升到一定程度之后會(huì)導(dǎo)致產(chǎn)生的資源體積過大，降低用戶的頁面渲染速度

在Webpack默認(rèn)配置中，當(dāng)一個(gè)bundle大于250kB時(shí)（壓縮前）會(huì)認(rèn)為這個(gè)bundle已經(jīng)過大了，在打包時(shí)會(huì)發(fā)生警告，如圖：

2、分離第三方庫(vendor)

為解決上方的問題，可以提取第三方庫(vender)

vendor的意思是“供應(yīng)商”，在Webpack中vendor一般指的是工程所使用的庫、框架等第三方模塊集中打包而產(chǎn)生的bundle

module.exports = {   entry: {     app: './src/app.js',     vendors: ['react','react-dom','react-router'],   } };

基于但也應(yīng)用的例子，我們添加了一個(gè)新的chunk name為vendor的入口，并通過數(shù)組的形式把工程所依賴的第三方模塊放了進(jìn)去

我們并沒有為vendor設(shè)置入口路徑，Webpack要如何打包呢？

這時(shí)我們可以使用CommonsChunkPlugin（在Webpack 4之后CommonsChunkPlugin已被廢棄，可以采用optimization.splitChunks）將app與vendor這兩個(gè)chunk中的公共模塊提取出來

通過這樣的配置，app.js產(chǎn)生的bundle將只包含業(yè)務(wù)模塊，其依賴的第三方模塊將會(huì)被抽取出來生成一個(gè)新的bundle，這也就達(dá)到了我們提取vendor的目標(biāo)

由于vendor僅僅包含第三方模塊，這部分不會(huì)經(jīng)常變動(dòng)。因此可以有效地利用客戶端緩存，在用戶后續(xù)請(qǐng)求頁面時(shí)會(huì)加快整體的渲染速度。

CommonsChunkPlugin主要是用來提取第三方庫和公共模塊，避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而導(dǎo)致加載時(shí)間過長。

3、多頁應(yīng)用

對(duì)于多頁應(yīng)用的場景，為了盡可能減小資源的體積，我們希望每個(gè)頁面都只加載各自必要的邏輯，而不是將所有頁面打包到同一個(gè)bundle中。因此每個(gè)頁面都需要有一個(gè)獨(dú)立的bundle，這種情形我們使用多入口來實(shí)現(xiàn)。請(qǐng)看下面的例子：

module.exports = {   entry: {     pageOne: './src/pageOne/index.js',     pageTwo: './src/pageTwo/index.js',     pageThree: './src/pageThree/index.js'   } };

上面的配置告訴webpack 需要 3 個(gè)獨(dú)立分離的依賴圖，此時(shí)入口與頁面是一一對(duì)應(yīng)的，這樣每個(gè)HTML只要引入各自的JS就可以加載其所需要的模塊