如何通过Webpack暴露函数供内联脚本调用？

安全阿岳

2026-7-27

解决expose-loader全局作用域冲突问题

你的代码里存在两处关键问题，导致了冲突错误：

derpFunc.js里错误引用了未定义的appCalendar，且手动挂载全局变量的操作和expose-loader的功能重复
导出语句和暴露逻辑不匹配

修正步骤

修复derpFunc.js代码
删掉手动挂载全局的代码，确保导出的是正确的函数：

function derpFunc(){
    console.log('derp');
}
// 移除手动挂载全局的代码，交给expose-loader处理
export { derpFunc };

确认webpack配置有效性
你的配置已经添加了override: true，只需确保暴露的变量名和导出的函数一致即可：

// Expose Legacy functions for use outside Webpack build
{
    test: require.resolve('./derpFunc.js'),
    use: [
        {
            loader: 'expose-loader',
            options: {
                exposes: 'derpFunc',
                override: true // 允许覆盖已存在的全局变量，解决冲突提示
            }
        }
    ]
},

错误原因说明

错误1：注释导出语句后，Webpack无法识别该模块，expose-loader无法获取要暴露的函数，导致全局作用域中不存在derpFunc，调用时触发类型错误。
错误2：手动在代码中挂载全局变量（你写错成了appCalendar），导致全局提前存在同名变量，expose-loader默认禁止覆盖，触发安全提示；开启override: true后，loader会强制覆盖已存在的全局变量，解决冲突。