「未知的出口提供」中的WebPack的輸出文件

Question

意味着當我設置output.pathinfo到true在webpack.config.js我與每一個模塊捆綁本深奧的描述輸出文件：

/* unknown exports provided */ 

是什麼意思？

編輯：

我已經從打字稿造成的WebPack不承認出口transpiling代碼（但它能夠推斷出其中出口已使用）。我調整了我的打字稿配置來解決這個問題（我已將module選項設置爲ES2015）。

Answer 1

output.pathinfo爲每個模塊添加註釋以幫助您識別它們及其導出。您將看到模塊的路徑存在，並且在此之上顯示模塊的導出以及實際使用的模塊的路徑。當模塊沒有輸出時，它將顯示unknown exports provided。

考慮以下三個文件的例子。

index.js（入口點）

import { one } from './module'; 
import printNumber from './otherModule'; 

printNumber(one); 

module.js

export const one = 1; 
export const two = 2; 
export const three = 3; 

export default() => console.log('default export'); 

otherModule.js

export default number => console.log(`The number is ${number}`); 

export const notUsed = 'not used'; 

在index.js沒有出口，評論反映了這一點。由於它沒有出口，它自動意味着所有出口都被使用。

/* unknown exports provided */ 
/* all exports used */ 
/*!******************!*\ 
    !*** ./index.js ***! 
    \******************/ 

在另一方面，module.js有四個出口：default，one，two和three。從這些導出中，只有one用於webpack包含的任何文件（在這種情況下僅在index.js中導入）。評論告訴我們這個。

/* exports provided: one, two, three, default */ 
/* exports used: one */ 
/*!*******************!*\ 
    !*** ./module.js ***! 
    \*******************/ 

同樣otherModule.js有兩個出口（在index.js再次）default和notUsed，其中僅使用默認的導出。

/* exports provided: default, notUsed */ 
/* exports used: default */ 
/*!************************!*\ 
    !*** ./otherModule.js ***! 
    \************************/ 

記住import X from 'module'從module進口默認的導出和名稱X分配給它。

---

這些信息在開發中可以用來查看整個應用程序實際使用的導出。在所示的示例中，很容易看到正在使用的內容，但在更大的應用程序中，您可能會發現此功能很有用。

注意：當您使用任何執行死代碼消除的工具（例如UglifyJS）優化未使用的導出時，將從該包中刪除未使用的導出。