javascript - 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”

现在我在 HTML 正文中有一些 js 代码需要调用 bundle 中的函数， 如果我尝试调用函数“functionA”(在 file1.js 中定义)，我会在浏览器控制台中收到此消息

Uncaught ReferenceError: functionA is not defined

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

Answer 1

从入口点文件中导出内容不会使它们在全局范围内可用。您有两个选择 - 显式地将函数添加到 window 对象，如下所示:

window.functionA = functionA;

或者将您的构建配置为作为库输出:

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

我不知道后者如何与设置为文件数组的入口点交互 - 您可能必须制作一个导入所有文件的入口文件(main.js 或其他文件)的功能，然后重新导出它们包含在一个对象，或类似的东西。