vue多页项目使用webpack打包后出现call错误

Question

问题描述

一个vue多页项目使用webpack打包后出现如下错误：

bootstrap:78 Uncaught TypeError: Cannot read property 'call' of undefined

at __webpack_require__ (bootstrap:78)
at Module.51 (index.js:918)
at __webpack_require__ (bootstrap:78)
at checkDeferredModules (bootstrap:45)
at bootstrap:151
at bootstrap:151

首先可以排除业务代码的问题，公司这边两套框架都会出现这个问题，应该是webpack的某种机制导致出现这个问题。

index.js:918行内容如下：

var vue_min = __webpack_require__(4);

问题出现的环境背景及自己尝试过哪些方法

项目为自己搭建的一个多页项目，提取了vue、axios等组件打包到vendors.js，准备做复用，即以后的功能更新，不会把这个文件上传到服务器。
bug复现步骤：
1、首次打包的时候，将打包后所有文件上传至服务器，访问正常。
2、第二次打包，引入了一个自定义组件（没有npm依赖），将除了vendors.js的所有文件上传至服务器，访问就出现上面的错误。这时候将第二次的vendors.js上传就不会有这个错误了。

相关代码

webpack的vendors配置如下：

  optimization: {
    minimize: false,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/](vue|vue-style-loader|vue-loader|css-loader|axios|setimmediate|process)[\\/]/,
          name: "vendors",
          chunks: "all"
        },
      }
    }
  },

你期待的结果是什么？实际看到的错误信息又是什么？

vendors.js是我提取的公共js代码，里面的东西都是不会升级的，vue、axios，可能在项目生命周期里都不会升级。现在的情况的每次引入新组件似乎都要把vendors也更新了，可是理论上来说，我引入的新组件并没有打包到这里面，不明白为什么会报错。并且这边项目的情况特殊，不允许每次都更新vendors.js，有没有办法避免这个错误呢？

Answer 1

猜测是moduleId变化导致的。
按题主的描述，vendor里面的包内容应该是不变的，但是并不代表webpack生成的vendor.js里的moduleId不变化。不知道题主是用什么做moduleId的，如果没有显示设置，就是这种从0开始的自增id，还是很有可能变化的。

问题里有提到是这一行出错，

var vue_min = __webpack_require__(4);

直观来说就是页面上的这些js里没有moduleId是4的这个模块。可以先看看是不是每次打包出来的vendor都是一样的（例如用一些文件diff工具，或者对比下hash）

如果是上述问题，可以尝试这么解决：

• 如果是这个问题可以考虑设置下moduleId的生成方式，用插件或者配置optimization.moduleIds。
• 还有一种方法就是使用dll（似乎是满足你的业务需求）。有时通用库会考虑使用webpack的dll的方式，打包一次后就不动了，业务代码打包用到这些通用库就用这个dll。