概念
入口起點(entry point)訓示 webpack 應該使用哪個子產品,來作為建構其内部依賴圖的開始。進入入口起點後,webpack 會找出有哪些子產品和庫是入口起點(直接和間接)依賴的。
每個依賴項随即被處理,最後輸出到稱之為 bundles 的檔案中。
可以通過在 webpack 配置中配置 entry 屬性,來指定一個入口起點(或多個入口起點)。預設值為 ./src。
配置
單個入口(簡寫)文法:
用法:entry: string|Array
webpack.config.js
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
複制
對象文法
用法:entry: {[entryChunkName: string]: string|Array}
webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
複制
對象文法會比較繁瑣。然而,這是應用程式中定義入口的最可擴充的方式。
對比
entry告訴Webpack入口檔案或者起點在哪裡。它可以是一個字元串,一個數組或者一個對象。這可能會使你感到困惑,但不同的類型适用于不同的場合。
如果你使用的是單個起點(大部分項目都是如此),那麼你可以使用任意的類型,它們的結果都會是一樣的。
1.entry——數組
但是,如果你想要添加互不依賴的多個檔案,你可以使用數組的格式。
舉個栗子,你的HTML可能需要“googleAnalytics.js”。你可以告訴Webpack在bundle.js的後面把它添加進去:

2.entry——對象
現在,當你有一個包含多個HTML檔案的多頁應用,而不是單頁應用的項目的時候(index.html和profile.html),你可以通過對象格式告訴Webpack去一次性生成多個bundle檔案。
下面的配置會生成兩個JS檔案:indexEntry.js和profileEntry.js,你可以在index.html和profile.html分别使用它們:
使用方法:
//profile.html
<script src=”dist/profileEntry.js”></script>
//index.html
<script src=”dist/indexEntry.js”></script>
複制
注意:檔案名來自“entry”對象的key。
3.entry——組合格式
你也可以在entry對象中使用數組。下面的例子會生成三個檔案:一個包含三個檔案的vendor.js,一個index.js和一個profile.js。