Webpack 导出功能答案

【问题标题】：Webpack export functionWebpack 导出功能
【发布时间】：2016-06-16 11:36:41
【问题描述】：

我有一些 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 代码需要调用包中的函数，如果我尝试调用函数“functionA”（在 file1.js 中定义），我会在浏览器控制台中收到此消息

Uncaught ReferenceError: functionA is not defined

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

【问题讨论】：

标签： javascript webpack

【解决方案1】：

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

window.functionA = functionA;

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

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

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

【讨论】：