Webpack全局导出函数失败：无法访问testResults()函数求助

嘿，刚看到你的问题，这俩坑我之前也踩过！咱们一步步来解决：

第一个问题：终端报Conflict: Multiple assets emit to the same filename bundle.js #

你现在的entry配置了两个入口（app.js和showResults.js），但output.filename写死成了bundle.js——Webpack要同时生成两个同名文件，肯定打架啊！

怎么改？ #

如果你的需求是把整个逻辑打包成一个可全局访问的库，那完全不需要把showResults.js单独作为入口，因为app.js已经引入它了。直接把entry改成：

entry: './app.js',

要是你确实需要分开打包多个文件，那就用[name]占位符让Webpack自动生成不同文件名：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].bundle.js', // 会生成app.bundle.js和showResults.bundle.js
  library: 'myNewLibrary'
}

第二个问题：浏览器报错myNewLibrary.testResults is not a function #

这个是因为你没把testResults暴露到myNewLibrary全局对象上。虽然showResults.js里导出了函数，但Webpack不会自动把所有依赖里的导出都挂载到你设置的library上，得在入口文件里明确导出。

修复步骤： #

1. 在app.js里导入并重新导出testResults：

// app.js
import { testResults } from './js/showResults';

// 把要给外部用的函数导出
export { testResults };

2. 优化output配置，明确库的挂载方式（避免环境兼容问题）：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  library: 'myNewLibrary',
  libraryTarget: 'window' // 强制把库挂载到window对象上，确保外部能访问
}

这样打包完，window.myNewLibrary就会包含testResults函数了！外部页面的调用代码不用改，刷新浏览器就能看到控制台输出hello啦～

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