入口起點(Entry Points)

單個入口（簡寫）語法：

用法：entry: string|Array<string>

entry 屬性的單個入口語法，是下面的簡寫

當你向 entry 傳入一個數組時會發生什么？向 entry 屬性傳入「文件路徑(file path)數組」將創建“多個主入口(multi-main entry)”。傳入數組這種方式有助于，在你想要多個依賴文件一起注入，并且將它們的依賴導向(graph)到一個“chunk”時。

對象語法：

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

這里指定了兩個入口，這里的 app 和 vendors 作為入口的名字，在配置 output 的時候可以用到

分離 應用程序(app) 和 公共庫(vendor) 入口:

從表面上看，這告訴我們 webpack 從 app.js 和 vendors.js 兩個入口文件開始創建依賴圖表(dependency graph)。這些圖表是彼此完全分離、互相獨立的（每個 bundle 中都有一個 webpack 引導(bootstrap)）。這種方式比較常見于，只有一個入口起點（不包括公共庫 vendor）的單頁應用程序(single page application)中。
假設 app 中引用了 vendors，這個時候打包后，app 中依舊包含了 vendors 中的代碼，為此，需要使用 CommonsChunkPlugin 這個插件。來去除掉 app 中存在于 vendors 中的代碼。使用了這個插件之后，會得到一個 commom 模塊，vendors 模塊中只有一句話，就是引用這個 common 模塊。這種情況，可以配置 CommonsChunkPlugin 插件，讓它得到的 common 模塊的命名和 vendors 一樣，這樣就把 vendors 覆蓋了。

多個頁面應用程序：

我們告訴 webpack 需要 3 個獨立分離的依賴圖表

假如有 3 個頁面，他們都應用了其中一個庫，由于是單頁應用，每次跳轉都會刷新頁面，重新加載腳本，因此可以將三個頁面公用的類庫打包為單個文件，這樣其他頁面可以利用前一個頁面緩存下來的類庫。同樣的這個時候，也需要使用到 CommonsChunkPlugin 這個插件

總結

以上是生活随笔為你收集整理的Webpack基础之入口起点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。