單個(gè)入口(簡寫)語法

用法：

entry:string|Array<string>

舉例：

webpack.config.js

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

T> 當(dāng)你向 entry 傳入一個(gè)數(shù)組時(shí)會(huì)發(fā)生什么？向 entry 屬性傳入「文件路徑(file path)數(shù)組」將創(chuàng)建“多個(gè)主入口(multi-main entry)”。

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

當(dāng)你正在尋找為「一個(gè)應(yīng)用程序或只有一個(gè)入口起點(diǎn)的工具（即 library）」快速設(shè)置一個(gè) webpack 配置的時(shí)候，這會(huì)是個(gè)很不錯(cuò)的選擇。

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

對象語法

用法：

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

webpack.config.js

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

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

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

常見場景

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

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

webpack.config.js

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

多個(gè)頁面應(yīng)用程序

webpack.config.js

?

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。