Vue.js中突发Uncaught ReferenceError: webpackJsonp错误求助

我之前也碰到过这个毫无预兆就冒出来的问题，尤其是改个CSS都触发，太影响开发节奏了！结合你给出的webpack.prod.conf.js配置，咱们从这几个方向试试：

1. 调整CommonsChunkPlugin的配置顺序和参数 #

webpack对CommonsChunkPlugin的执行顺序极其敏感，尤其是涉及runtime manifest的部分。你的配置里有三个该插件实例，建议调整顺序并简化async参数逻辑：

修改这部分代码：

// 先提取node_modules中的第三方依赖到vendor
new webpack.optimize.CommonsChunkPlugin({
  name: "vendor",
  minChunks(module) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
    );
  }
}),
// 提取webpack运行时manifest，确保它优先加载
new webpack.optimize.CommonsChunkPlugin({
  name: "manifest",
  minChunks: Infinity
}),
// 最后处理异步chunk的公共代码
new webpack.optimize.CommonsChunkPlugin({
  name: "app",
  async: "vendor-async",
  children: true,
  minChunks: 3
}),

去掉async: false的显式声明（默认就是false），让manifest在vendor之后生成，确保webpackJsonp的定义代码被优先注入页面。

2. 强制指定HtmlWebpackPlugin的chunk加载顺序 #

你当前用的chunksSortMode: "dependency"自动排序偶尔会出错，导致manifest/vendor没有优先加载。改成手动指定顺序更稳妥：

new HtmlWebpackPlugin({
  // ...其他原有配置
  chunksSortMode: "manual",
  chunks: ["manifest", "vendor", "app"]
}),

这样页面会先加载包含webpackJsonp定义的manifest，再加载第三方依赖vendor，最后加载业务代码，从根源避免加载顺序错误。

3. 彻底清理各类缓存 #

既然之前运行正常，突然出问题，缓存大概率是元凶：

• 清理npm/yarn缓存：执行npm cache clean --force或yarn cache clean
• 清理构建产物：删除项目根目录的dist文件夹，以及可能存在的.webpack-cache缓存目录
• 清理浏览器缓存：打开开发者工具勾选「禁用缓存」，或直接清空浏览器缓存后重新构建

4. 调试ExtractTextPlugin的allChunks配置 #

你设置了allChunks: true，这个配置会提取所有chunk的CSS到一个文件，偶尔会和代码分割逻辑冲突。可以暂时改成false测试：

new ExtractTextPlugin({
  filename: utils.assetsPath("css/[name].[contenthash].css"),
  allChunks: false
}),

如果问题消失，再慢慢调试CSS提取逻辑，避免和JS chunk的加载顺序冲突。

5. 检查baseWebpackConfig的output配置 #

别忘了看看webpack.base.conf.js里的output部分，确保publicPath设置正确（生产环境应该对应config.build.assetsPublicPath），路径错误会导致chunk加载失败，间接触发webpackJsonp错误。

如果以上方法都不行，可以再提供webpack.base.conf.js的内容和本地webpack版本，咱们再进一步排查！

内容的提问来源于stack exchange，提问作者Sreenath C A