單個入口(簡寫)語法

用法：

entry:string|Array<string>

舉例：

webpack.config.js

const config = {entry: './path/to/my/entry/file.js'};module.exports = config;

T> 當你向 entry 傳入一個數組時會發生什么？向 entry 屬性傳入「文件路徑(file path)數組」將創建“多個主入口(multi-main entry)”。

傳入數組這種方式有助于，在你想要多個依賴文件一起注入，并且將它們的依賴導向(graph)到一個“chunk”時。

當你正在尋找為「一個應用程序或只有一個入口起點的工具（即 library）」快速設置一個 webpack 配置的時候，這會是個很不錯的選擇。

但是，使用此語法擴展(extend or scale)配置沒有太多的靈活性。

對象語法

用法：

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

webpack.config.js

const config = {entry: {app: './src/app.js',vendors: './src/vendors.js'}};

對象語法會比較繁瑣。然而，這是應用程序中定義入口的最可擴展的方式。

T> “可擴展的 webpack 配置”是指，可重用并且可以與其他配置組合使用。這是一種流行的技術，用于將關注點(concern)從環境(environment)、構建目標(build target)、運行時(runtime)中分離。然后使用專門的工具（如 webpack-merge）將它們合并。

常見場景

以下列出入口配置和它們的實際用例：

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

webpack.config.js

const config = {entry: {app: './src/app.js',vendors: './src/vendors.js'}};

多個頁面應用程序

webpack.config.js

?

const config = {entry: {??pageOne: './src/pageOne/index.js',???pageTwo: './src/pageTwo/index.js',???pageThree: './src/pageThree/index.js'?}};

?

總結

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

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