webpack 5 源映射供应商 naming/exclusion

Question

我正在使用 webpack 5 (5.53.0) 并希望只为我自己的代码（不包括供应商）生成一个源映射到不同的输出目录。这样做的动机是我想始终将源映射发布到不同的服务器，该服务器只能由内部网络访问（public 无法访问）。

为了在我和供应商之间拆分代码，我利用了 splitChunks.chunks

splitChunks: {
  chunks: "all"
}

由于devtool不支持排除，所以我按照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.

使用 SourceMapDevToolPlugin 我使用 filename 和 exclude 选项如下

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

当我运行 webpack --mode production 时，dist 输出目录有 2 个捆绑文件 - 一个给我，一个给供应商

$ 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

如您所见，供应商文件名被命名为 5.95feeb62d4fe21871683.bundle.js，并且由于它是散列的，因此每次供应商包更改时它都会更改。我如何定义名称（例如 [name].[fullhash].bundle.js.map ）或以我可以用 SourceMapDevToolPlugin?

排除它的方式引用名称

Answer 1

给分割块一个明确的名称，很容易排除它们

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 源映射供应商 naming/exclusion

webpack 5 source maps vendor naming/exclusion

webpack

webpack-5