Webpack导出函数

Question

我有一些JS文件，每个文件都是一个独立的函数，并具有唯一的名称，我想将所有这些文件打包成一个捆绑包，所以我写了这段代码

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

这是工作内容，我有一个“ .dist/app.bundle.js”文件的捆绑包。

现在我有一些js代码在HTML正文中，需要调用捆绑包中的函数，如果我尝试调用“functionA”功能（它定义在file1.js中），我会在浏览器控制台中看到以下消息：

Uncaught ReferenceError: functionA is not defined

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

- Touhami

Answer 1

从一个入口文件导出的内容并不会使它们在全局范围内可用。你有两个选择 - 要么显式地将函数添加到 window 对象中，像这样：

window.functionA = functionA;

或者配置你的构建输出为一个库：

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

我不知道后者如何与您的入口点设置为文件数组进行交互 - 您可能需要创建一个单一的入口文件（main.js或类似的文件），该文件导入所有函数，然后将它们包含在对象中重新导出，或者类似于此的操作。

- Joe Clay