webpack中“pragma style”的含义是什么？

Question

他们说devtool configuration docs中的

：

  

前缀@，＃或＃@将强制执行pragma样式。 （默认为＃，   推荐）

这是什么意思？

Answer 1

要更明确一点，＆＃34; pragma＆＃34;被称为是一系列字符，表示浏览器的元数据。在这种情况下，元数据告诉浏览器在哪里获取源映射文件，如果它决定加载它（例如，当用户打开浏览器开发工具时）。

如sirlancelot的链接所示，pragma的标准格式是使用以下形式的注释，从//#开始：

//# sourceMappingURL=/path/to/file.js.map

在最新版本的Webpack中，如果未在devtool设置中指定编译指示字符，则默认情况下在注释字符后使用#字符，如上所示。

在旧版本的Webpack中，pragma字符用于默认为@，这将导致对表单的注释：

//@ sourceMappingURL=/path/to/file.js.map

在最近的浏览器中使用//@表单会立即在浏览器控制台中显示弃用警告（至少在Chrome中）。

如果您需要支持较旧的浏览器，则可以通过在devtool设置前添加所需字符来覆盖默认的pragma，例如：

devtool: "@source-map"

或使用以下内容将其明确设置为#

devtool: "#source-map"

但是它最干净的IMO只是省略了前缀字符，让Webpack通过指定它来添加默认值：

devtool: "source-map"

Answer 2

不同的浏览器需要不同的格式来指定源映射。如果您的浏览器没有显示网络包文件的源图，那么您可以更改该选项以使其与您的浏览器兼容。