Javascript 网页包导出功能

我有一些js文件，每个文件都是一个具有唯一名称的独立函数，我想将所有这些文件打包在一个包中，所以我编写了以下代码

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

这就是工作，我有我的bundle文件“.dist/app.bundle.js”

现在我在HTML主体中有一些js代码，需要调用捆绑包中的函数， 如果我尝试调用函数“function”（在file1.js中定义），我会在浏览器控制台中收到此消息

Uncaught ReferenceError: functionA is not defined

---

问题是如何从bundle导出函数以将其导入HTML代码中？

从入口点文件导出内容不会使其在全局范围内可用。您有两个选项—或者显式地将函数添加到

窗口

对象，如下所示：

window.functionA = functionA;

或将生成配置为输出为库：

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

我不知道后者是如何与设置为文件数组的入口点交互的——您可能需要创建一个单一的入口文件（

main.js

或类似文件），该文件导入所有函数，然后重新导出包含在对象中的函数，或类似的东西