天天看點

webpack的入口起點(entry points)

概念

入口起點(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的後面把它添加進去:

webpack的入口起點(entry points)

2.entry——對象

現在,當你有一個包含多個HTML檔案的多頁應用,而不是單頁應用的項目的時候(index.html和profile.html),你可以通過對象格式告訴Webpack去一次性生成多個bundle檔案。

下面的配置會生成兩個JS檔案:indexEntry.js和profileEntry.js,你可以在index.html和profile.html分别使用它們:

webpack的入口起點(entry points)

使用方法:

//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。

webpack的入口起點(entry points)