使用Webpack DllReference Plugin时出现运行时‘function expected’错误

我之前在项目里用DllReferencePlugin优化构建速度时，也碰到过一模一样的‘function expected’报错——不用插件就正常，一用就炸。结合我的踩坑经验，大概率是DLL打包配置和主构建的匹配度问题，咱们一步步排查解决：

1. 确认DLL入口的依赖完整性 #

首先检查你的DLL打包配置里，是否把所有需要的polyfills和依赖都包含进去了。比如如果用了core-js或者regenerator-runtime这类polyfills，必须明确加到DLL的entry里，不能只放node_modules的第三方库：

// dll.webpack.config.js
module.exports = {
  entry: {
    vendor: [
      // 先把polyfills放在最前面
      'core-js/stable',
      'regenerator-runtime/runtime',
      // 然后是第三方依赖
      'react',
      'react-dom',
      'axios'
      // 其他你要打包进DLL的库
    ]
  },
  // 其他配置...
}

同时要确保主项目的代码里不再重复引入这些polyfills，否则会导致模块重复加载，引发函数冲突。

2. 保证Webpack及相关插件版本一致 #

DLL打包和主构建必须使用完全相同版本的Webpack、babel-loader、@babel/core这类核心工具。如果版本不一致，很可能会出现模块编译后的格式不兼容，导致调用函数时出现类型错误。

你可以对比package.json里的依赖版本，或者直接重新安装所有依赖，确保版本统一。

3. 对齐DLLPlugin和DllReferencePlugin的context配置 #

这个是最容易被忽略的点！context参数必须在两个插件里保持一致，指向项目的根目录，这样Webpack解析模块的路径才会统一：

// DLL配置里的DllPlugin
new webpack.DllPlugin({
  name: '[name]_[hash]',
  path: path.join(__dirname, 'dist', '[name]-manifest.json'),
  context: __dirname // 项目根目录
})

// 主构建里的DllReferencePlugin
new webpack.DllReferencePlugin({
  context: __dirname, // 必须和上面的context完全一致
  manifest: require('./dist/vendor-manifest.json')
})

如果context不匹配，Webpack会错误解析模块的位置，导致调用的函数不是预期的类型，就会抛出‘function expected’。

4. 调整DLL的libraryTarget配置 #

有些库在打包进DLL后，导出方式可能和直接打包时不同（比如CommonJS和ES模块混用）。你可以尝试修改DLL配置的output.libraryTarget，比如改成umd或者var：

// dll.webpack.config.js的output配置
output: {
  filename: '[name].dll.js',
  path: path.join(__dirname, 'dist'),
  library: '[name]_[hash]',
  libraryTarget: 'umd' // 或者尝试'var'，根据你的依赖调整
}

这个配置会改变DLL模块的导出方式，有时候能解决函数类型不匹配的问题。

5. 清除缓存后重新构建 #

旧的DLL文件和manifest缓存也可能导致奇怪的问题。先删掉dist目录下的所有DLL相关文件（比如vendor.dll.js和vendor-manifest.json），然后先重新打包DLL，再打包主项目，确保所有文件都是最新的。

如果还是不行，你可以尝试逐步减少DLL里的依赖：先只打包一个库（比如react），测试是否还报错。如果没问题，再逐个添加其他依赖，直到找到引发错误的那个库，然后针对性调整它的打包方式。

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