Windows WebView无法调用Webpack包裹的脚本函数问题求助

这个问题我之前也碰到过，核心原因很简单：Webpack默认会把所有代码封装在独立的模块作用域里，你的myCoolFunc并没有被挂载到全局的window对象上，而UWP的InvokeScriptAsync是在全局作用域下去查找函数的，所以自然找不到它。

下面给你几个靠谱的解决办法，按需选择：

方法1：修改Webpack配置，自动暴露函数到全局 #

直接在webpack.config.js里配置output选项，让Webpack把你的函数挂载到window上：

如果你的函数是作为模块的导出项（比如你代码里的exports.myCoolFunc = myCoolFunc），可以这样配置：

module.exports = {
  // 其他配置（entry、module等）保持不变
  output: {
    filename: 'bundle.js',
    library: 'MyApp', // 全局对象的名称，随便取
    libraryTarget: 'window', // 指定挂载到window对象
    libraryExport: 'myCoolFunc' // 指定要暴露的导出项
  }
};

这样打包后，window.MyApp就是你的模块导出对象，window.MyApp.myCoolFunc就是你要调用的函数，这时候UWP里可以这样调用：

webView.InvokeScriptAsync("MyApp.myCoolFunc", new List<string> { });

如果你想直接把myCoolFunc变成全局函数，简化调用，可以把配置改成这样：

output: {
  filename: 'bundle.js',
  library: 'myCoolFunc',
  libraryTarget: 'window'
}

这时候打包后window.myCoolFunc直接可用，UWP里原来的调用代码就不用改了。

方法2：在源码里手动挂载函数到全局 #

如果不想折腾Webpack配置，直接在你的JS源码里加一行代码，把函数手动挂到window上就行：

function myCoolFunc() {
  // 你的函数逻辑
}

// 关键代码：把函数暴露到全局作用域
window.myCoolFunc = myCoolFunc;

// 原来的模块导出可以保留，不影响内部使用
exports.myCoolFunc = myCoolFunc;

这种方法最简单直接，不管Webpack怎么打包，这个函数都会出现在全局作用域里，UWP的调用代码完全不用改。

方法3：（不推荐）通过Webpack模块系统间接调用 #

如果不想暴露全局函数，也可以通过Webpack的内部模块系统获取函数，但这种方法比较hack，而且不同Webpack版本的实现可能不一样，比如Webpack 4及以下会用webpackJsonp，Webpack 5用webpackChunk，所以除非必要，不建议用这种方式。

额外注意事项 #

• 如果你用的是Webpack 5，output.libraryTarget依然支持window，也可以用更通用的globalThis来适配不同环境。
• 调用函数前一定要确保WebView已经加载完页面，可以在NavigationCompleted事件触发后再执行InvokeScriptAsync，避免页面未加载完成导致找不到函数。
• 打包后可以先在浏览器里打开页面，在控制台输入window.myCoolFunc（或者你配置的全局名称），确认函数确实存在，再去UWP里测试。

内容的提问来源于stack exchange，提问作者user1629894