Webpack DllPlugin 报错 xxx is not defined 的排查与解决

作者:初晴时间:2026-10-23 13:44:58浏览:491

本文详细解析Webpack中使用DllPlugin时出现的“xxx is not defined”错误。主要排查方向包括确保DllPlugin与DllReferencePlugin的context上下文一致、library与name配置匹配,以及确保生成的dll文件正确注入HTML。通过对比dll.config.js与主配置文件的关键代码,提供完整的解决方案。

DllPlugin报错原因分析

出现“xxx is not defined”错误通常由以下三个主要原因导致:

  • 首先,DllPlugin与DllReferencePlugin中的context上下文配置不一致。
  • 其次,DllPlugin输出的library名称与DllReferencePlugin引用的name不匹配。
  • 最后,生成的dll.js文件未被正确引入到HTML页面中。

DllPlugin配置示例

以下是dll.config.js的配置示例:


module.exports = {
  mode:"production",
  output: {
    path:path.resolve(__dirname, '../dist'),
    filename: '[name].dll.js',
    library: dllName, //这里需要和DllPlugin option.name 一致
  },
  entry: {
    "lib": vendors,
  },
  plugins: [
    new webpack.DllPlugin({
      path:path.resolve(__dirname,'../dist/manifest.json'),
      name: dllName,
      context: __dirname, //上下文必填
    }),
    new CleanWebpackPlugin([`./dist/*.dll.js`,`./dist/*.json`], { root: path.resolve(__dirname, "../") }),
  ]
 }

DllReferencePlugin与文件注入

在主webpack.config.js中,需要添加DllReferencePlugin并注入dll文件:


 new webpack.DllReferencePlugin({
   context: __dirname, //这个上下文对应DllPlugin
   manifest: require('../dist/manifest.json')}
   ),
   new AddAssetHtmlPlugin( 
    [
      {
        filepath: "./dist/*.dll.js", //将生成的dll文件加入到index.html中
      },
    ]
  ),

以上即为解决该问题的完整步骤,希望能为您的开发工作提供参考。

作者最新文章