使用Webpack构建项目时出现Can't find variable: webpackJsonp报错求助

这个报错我之前帮别人排查过好几次，本质是Webpack的runtime chunk没在你的jquery-uls bundle之前加载——webpackJsonp是Webpack用来管理异步模块加载的核心函数，它是由runtime chunk提供的。在Rails Webpacker的默认配置里，runtime会被抽离成单独的文件，但如果你的自定义entry没和它关联上，就会出现找不到变量的问题。

下面是几个针对性的解决办法，按优先级尝试：

1. 确保布局中先加载runtime bundle #

打开你的Rails布局文件（通常是app/views/layouts/application.html.erb），检查是否先引入了runtime.js，再加载你的jquery-uls bundle。正确的顺序应该是这样：

<%= javascript_pack_tag 'runtime', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'jquery-uls', 'data-turbolinks-track': 'reload' %>

如果之前没加runtime的标签，加上之后大概率能解决问题——runtime会提前定义好webpackJsonp函数，让后续的bundle可以正常调用它。

2. 调整entry的配置方式 #

你当前是把jquery-uls相关的依赖单独做成一个entry，但这种方式容易和Webpacker的runtime管理脱节。更稳妥的做法是把这些依赖合并到默认的application.js pack里：

// 在app/javascript/packs/application.js中添加如下引入
import '@bower_components/jquery/dist/jquery.js';
import '@bower_components/lodash/lodash.js';
import '@bower_components/jquery.uls/src/jquery.uls.data.js';
import '@bower_components/jquery.uls/src/jquery.uls.data.utils.js';
import '@bower_components/jquery.uls/src/jquery.uls.lcd.js';
import '@bower_components/jquery.uls/src/jquery.uls.languagefilter.js';
// ... 剩下的jquery-uls文件

这样打包时，Webpacker会自动把runtime和application bundle关联起来，不会出现变量缺失的问题。

3. 检查Webpacker的runtime配置 #

打开config/webpack/environment.js，看看有没有手动禁用runtimeChunk的配置，比如：

// 如果有这行代码，注释掉或者删除它
environment.config.set('optimization.runtimeChunk', false);

Webpacker默认会开启runtimeChunk: 'single'，把runtime抽成单独文件，手动禁用后就会导致webpackJsonp无法被正确注入。

4. 清理缓存重新构建 #

有时候旧的缓存会导致配置不生效，执行以下命令彻底清理并重新编译：

rails webpacker:clean
rails webpacker:compile

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