webpack 5 source maps vendor naming/exclusion

Question

i am using webpack 5 (5.53.0) and would like to produce a source maps only to my own code (excluding vendors) to a different output directory. the motivation for doing it, is i would like to always publish the source maps to a different server, which is accessible only to an internal network (not accessible to the public).

to split the code between mine and the vendors, i leveraged splitChunks.chunks

splitChunks: {
  chunks: "all"
}

since devtool does not support exclusion, i followed the tip in webpack documentation

Instead of using the devtool option you can also use SourceMapDevToolPlugin directly as it has more options. Never use both the devtool option and plugin together.

using SourceMapDevToolPlugin i used the filename and exclude options as follows

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

when i run webpack --mode production, the dist output directory has 2 bundled files - one for mine and one for the vendors

$ ls -x1 dist/*.js dist/maps/*.js.map
dist/5.95feeb62d4fe21871683.bundle.js
dist/main.95feeb62d4fe21871683.bundle.js
dist/maps/5.95feeb62d4fe21871683.bundle.js.map
dist/maps/main.95feeb62d4fe21871683.bundle.js.map

as you can see, the vendors filename is named 5.95feeb62d4fe21871683.bundle.js and since it is hashed, it changes each time the vendor packages changes. how do i define the name (such as [name].[fullhash].bundle.js.map without a dedicate function) or references the name in a way that i could exclude it with SourceMapDevToolPlugin?

score 0 · Accepted Answer · answered Oct 24 '21 at 18:51

giving an explicit name for the split chunks, it was easy to exclude them

splitChunks: {
  chunks: "all",
  cacheGroups: {
    defaultVendors: {
      filename: "vendors.[fullhash].bundle.js",
    }
  }
}

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

webpack 5 source maps vendor naming/exclusion

1 Answers1