Uncaught ReferenceError：如何访问Webpack打包的JavaScript函数

嘿，我刚帮你梳理了这个问题的解决思路，咱们一步步来搞定它！

首先得明白，Webpack默认会把所有JS代码打包成模块化的闭包，这意味着你写的函数默认只在模块内部可见，不会暴露到全局window对象上，所以HTML里直接调用就会出现Uncaught ReferenceError。针对cookiecutter-flask的默认配置，有两种简单的解决方法：

方法一：把函数挂载到window全局对象上 #

这是最直接的方式，适合快速测试或简单函数。

1. 打开assets/js/plugins.js（或者你新增的JS文件），把你的函数挂载到window上：

// 比如你要添加的函数是sayHello
window.sayHello = function(name) {
  alert(`Hello, ${name}!`);
};

2. 重新运行Webpack打包命令：

npm run build

（如果是开发模式用npm run watch实时编译）

3. 现在你就可以在HTML模板里直接调用这个函数了：

<button onclick="sayHello('World')">点击测试</button>

方法二：调整Webpack配置，暴露全局变量 #

如果你不想手动挂载到window，可以修改Webpack配置来自动暴露指定变量。

1. 打开webpack.config.js，在plugins数组里添加webpack.ProvidePlugin配置：

const webpack = require('webpack');

module.exports = {
  // ... 其他原有配置
  plugins: [
    // ... 已存在的plugins
    new webpack.ProvidePlugin({
      sayHello: ['../assets/js/plugins.js', 'sayHello']
      // 格式：全局变量名: ['模块相对路径', '导出的函数名']
    })
  ]
};

2. 同时在plugins.js里导出你的函数：

export function sayHello(name) {
  alert(`Hello, ${name}!`);
}

3. 重新打包后，HTML里就能直接调用sayHello()了。

额外注意点 #

cookiecutter-flask的默认Webpack配置是按照ES模块规范打包的，所有代码都被包裹在独立的模块作用域中，不会污染全局命名空间——这是现代前端打包的最佳实践，但如果你需要在HTML的全局环境中访问函数，就必须显式地把它暴露出去。

另外，要确保你的JS文件已经被正确引入到HTML模板中：cookiecutter-flask默认会通过模板标签{{ webpack['app.js'] }}引入打包后的文件，检查一下你的模板里有没有这个标签哦！

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