前注：

文檔全文請查看 根目錄的文檔說明。

如果可以，請給本項目加【Star】和【Fork】持續關注。

有疑義請點擊這里，發【Issues】。

3、入口（多入口）

示例目錄

在上面的webpack.config.js中，有如下代碼：

// 入口文件，指向app.js entry: './app.js',

以上代碼相當于：

entry: {main: './app.js' }

如果是普通的項目（單入口），那么按照上面的方式寫（entry: './app.js'）就可以了。

至于下面的方式是什么呢？答案是：用于提供【多入口】的解決方案。

假如我一個項目里，允許有A、B兩個html文件，他們之間是不同的入口文件（比如一個是用戶入口頁，一個是管理入口頁）。

顯然雖然是兩個不同的入口，但是他們之間有很多共通的邏輯（否則就有大量重復開發工作了），因此我們需要將其寫在同一個工程中，然后通過不同的入口文件引入他。

他的依賴樹可能是這樣的：

. |____first.html | |____first.js | | |____common.js |____second.html | |____second.js | | |____common.js

也就是說，first.js和second.js兩個文件，都共享一個common.js模塊。

如示例代碼點擊查看github。

核心代碼如下：

// webpack.config.js ... entry: {first: './first_entry.js',second: './second_entry.js' }, ...

當然，只配置入口，是無法正常運行的，會報錯：

Multiple assets emit to the same filename

意思就是，你把多入口文件打包到一個文件里了，這樣是不對的。

因此我們應當這樣配置：

output: {// 文件名，將打包好的導出為bundle.jsfilename: './dist/[name].js' }

這段代碼的意思是：

將多入口文件，打包到dist文件夾下；

并且名字根據入口文件決定；

[name]表示文件名自動匹配入口文件的key（即first: './first_entry.js'里面的first）；

fork本項目，并且在本文件夾下執行npm run test來打包，然后打開first.html和second.html來查看效果（見控制臺console）

總結

以上是生活随笔為你收集整理的手把手教你webpack3（3）入口（多入口）entry的全部內容，希望文章能夠幫你解決所遇到的問題。

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