Webpack5如何排除vendor包生成仅自有代码的SourceMap到指定目录

方案一：显式指定vendor chunk命名（推荐，规则更可控） #

调整splitChunks配置，新增cacheGroup专门拆分node_modules下的第三方依赖，固定vendor chunk名称，避免生成随机数字id的chunk：

splitChunks: {
  chunks: "all",
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: "vendors", // 固定vendor包前缀
      priority: -10,
      reuseExistingChunk: true
    }
  }
}

修改SourceMapDevToolPlugin的exclude规则匹配固定的vendor命名即可：

new webpack.SourceMapDevToolPlugin({
  filename: "maps/[name].[fullhash].bundle.js.map",
  publicPath: "https://private-server.com",
  exclude: [/^vendors.*\.bundle\.js$/]
})

方案二：直接配置include规则匹配业务代码（无需修改分包逻辑） #

如果不想调整默认的splitChunks分包规则，可以直接用include参数指定仅为业务代码chunk生成SourceMap，比exclude规则更稳妥，不受vendor命名变化影响：

new webpack.SourceMapDevToolPlugin({
  filename: "maps/[name].[fullhash].bundle.js.map",
  publicPath: "https://private-server.com",
  // 仅匹配业务入口chunk，示例中业务入口为main，多入口可新增对应规则
  include: [/^main.*\.bundle\.js$/]
})

注意事项 #

• 请确认webpack配置中devtool字段已设置为false或者完全删除，避免和SourceMapDevToolPlugin同时生效引发冲突。
• 如果有多个业务入口，可在include数组中添加所有业务入口对应的命名匹配规则。

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