webpack中"pragma style"的含义是什么？

Question

在devtool配置文档中,他们说:

前缀@,#或#@将强制执行pragma样式.(默认为#,推荐)

这是什么意思？

Answer 1

为了更加明确一点,所引用的"pragma"是一个表示浏览器元数据的字符序列.在这种情况下,元数据告诉浏览器在何处获取源映射文件,如果它决定加载它(例如,当用户打开浏览器开发工具时).

如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

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