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中
},
]
),
以上即为解决该问题的完整步骤,希望能为您的开发工作提供参考。
作者最新文章
怎么在线格式化压缩JS代码并保留原始注释
2026-11-05 09:15:34
生产环境怎么自动移除JS控制台打印日志
2026-11-05 09:07:54
Babel 配置 core-js 完整指南:@babel/preset-env 与 useBuiltIns 设置
2026-11-04 20:32:23
Rollup打包集成Terser进行JS压缩的配置方法
2026-11-03 11:58:27
core-js v3 安装配置:配合 @babel/preset-env 实现按需引入
2026-11-03 11:11:05
