在使用 Webpack 打包前端应用时，经常会遇到 Jsonp Function 未定义的错误，这个问题很常见，但是也很容易解决，本文将帮助你深入理解这个问题并提供可行的解决方案。
问题描述
通常，在 Webpack 中使用 jsonp 模式打包应用时，会在打包后的输出文件中生成一个名为 webpackJsonp 的函数。这个函数用于管理加载后的模块，并将它们添加到应用的运行时环境中。然而，有时候我们会遇到以下错误：
-------- --------------- ------------ -- --- -------
这个错误表示我们的应用代码正试图访问名为 webpackJsonp 的函数，但是这个函数并没有被定义。通常，这个错误会在应用的入口文件处出现，指示着尝试访问该函数的代码出现问题。
问题原因
这个问题通常是由于 Webpack 的 output.jsonpFunction 配置选项造成的。这个选项用于配置生成的 jsonp 函数名称。如果在 output.jsonpFunction 中指定了一个非标准名称（例如 myCustomJsonpFunction），那么在打包后的应用中就不会有一个名为 webpackJsonp 的函数。这就会导致前端应用无法正确地加载模块并运行。
解决方案
取消对 output.jsonpFunction 的配置
如果你对 output.jsonpFunction 进行了配置，并且不确定如何正确地配置，那么最好的方法就是将其删除。在大多数情况下，Webpack 能够根据默认设置正确地生成 jsonp 函数名称，无需手动配置。
修复受影响的代码
如果你的应用代码中包含了对 webpackJsonp 函数的引用，并且已经配置了一个非标准的 jsonp 函数名称，那么最好的方法就是修复受影响的代码。将代码中的 webpackJsonp 函数引用替换为使用正确的 jsonp 函数名称（例如，在 output.jsonpFunction 中指定的名称）进行引用即可。
以下是使用默认 jsonp 函数名称的示例代码：
-- -----------------
-------------- - -
-- ---
------- -
-- -- ------------- --
-
--
-- --------
------ ---------------
------ ---------------
-- ---如果配置了非标准的 jsonp 函数名称，则需要在应用代码中手动地引用该名称：
-- -----------------
-------------- - -
-- ---
------- -
-------------- -----------------------
-
--
-- --------
------ --------------------- ---- --------------------------
---------------------------------- ----- ----------- ------ -------结论
虽然 Jsonp Function 未定义的问题可能会让你感到困惑，但是通过了解问题的原因和解决方案，你可以轻松地避免和解决这个问题。遵循基本的规则，例如删除不必要的配置选项，将代码中的引用替换为正确的 jsonp 函数名称等，可以让你成功地构建和部署你的前端应用。
参考资料
- Webpack manifest's key "jsonpFunction" not working like intended
- Webpack official documentation - output.jsonpFunction
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6723135f2e7021665e0e1eec