Webpack4配置DllPlugin后DLL被忽略 vendor代码仍被打包进业务包

• 核心原因是DllPlugin和DllReferencePlugin的上下文（context）未显式统一，导致模块路径匹配失败，主配置无法识别已经预打包的依赖
• 次要问题：vendor配置中babel-loader排除了node_modules，虽然不影响DLL匹配，但会导致预打包的依赖未经过语法编译，可能出现低版本浏览器兼容问题
• 其他可能诱因：打包顺序错误、manifest路径不匹配、mode差异导致模块解析规则不一致

1. 统一上下文配置 #

在两份配置中显式指定相同的context值，确保模块路径解析逻辑完全一致：

• 修改webpack.vendor.config.js中的DllPlugin配置：

new webpack.DllPlugin({
    name: 'vendor_lib',
    path: path.join(__dirname, 'dist', 'vendor-manifest.json'),
    context: __dirname // 新增这一行
})

• 修改主配置中的DllReferencePlugin配置，取消context注释：

new webpack.DllReferencePlugin({
    context: __dirname, // 取消注释，和DllPlugin的context保持一致
    manifest: require('./dist/vendor-manifest.json')
})

2. 调整vendor配置的babel-loader规则 #

移除webpack.vendor.config.js中babel-loader的exclude: /node_modules/配置，确保预打包的依赖经过语法编译：

{
    test: /\.jsx?$/i,
    loader: 'babel-loader?cacheDirectory=true',
    // 删除exclude: /node_modules/这一行
    options: {}
}

3. 对齐mode配置 #

根据构建场景调整vendor配置的mode，和主配置保持一致：

• 开发环境使用mode: 'development'
• 生产环境打包时将vendor配置的mode改为production，避免模块解析逻辑差异

4. 保证打包顺序 #

必须严格按照先打包vendor、再打包业务代码的顺序执行：

# 第一步：生成DLL文件和manifest
webpack --config webpack.vendor.config.js
# 第二步：执行业务代码构建
# （你的主配置构建命令）

修复后执行构建，对比业务包的体积：如果体积大幅下降，说明DLL已经生效。也可以打开打包后的业务代码，搜索react等依赖的核心代码，确认已经没有对应实现，只会从预打包的vendor bundle中读取。

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