的WebPack導出功能

Question

我有一些JS文件，每個文件是唯一的名稱standonlone功能，我想包在一個包所有這些文件，所以我做這個代碼

module.exports = { 
    entry: { 
     app:[ 
      './file1.js', 
      './file2.js', 
      './file3.js', 
      './file4.js' 
     ], 
    }, 
    output: { 
     path: './dist/', 
     filename: '[name].bundle.js' 
    } 
}; 

這是工作，我有我的包文件「.dist/app.bundle.js」

現在我有一些需要調用函數的HTML體中的js代碼， 如果我嘗試調用函數「functionA」（即在file1.js中定義）我在瀏覽器控制檯中收到此消息

Uncaught ReferenceError: functionA is not defined 

問題是如何從包中導出我的函數以將其導入到我的HTML代碼中？

Answer 1

從入口點文件導出東西不會使它們可用於全局範圍。你有兩個選擇 - 要麼明確添加功能到window對象，像這樣：

window.functionA = functionA; 

或者輸出爲庫配置構建：

// webpack.config.js - abridged 
module.exports = { 
    output: { 
     library: "myModule", 
     libraryTarget: "umd" 
    } 
}; 

我不知道該怎麼後者與您的入口點交互設置爲一組文件 - 您可能必須創建一個入口文件（main.js或其他東西），導入所有功能，然後重新導出它們包含在一個對象中，或類似的東西。