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正文中有一些需要调用bundle中函数的js代码，如果我尝试调用函数“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或其他内容）然后重新导出包含在对象中的对象，或类似的东西。

Webpack导出功能

1 个答案: