webpack如何定义每个源文件名

Question

webpack实际输出单个文件var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop ，但开发人员可以在chrome控制台中看到源文件名，它是如何工作的？

源代码：

a.js

bundle.js

b.js

import './b.js'
console.log('hello from a.js')

在chrome控制台中：

哪些API可以显示源文件名？

Answer 1

当您在开发模式下构建时，Webpack实际上会输出第二个文件。这是一个源图文件，可以让浏览器知道在哪里找到正确的源文件。在您的情况下，这可能被称为bundle.js.map。

在制作中，人们通常不会发布源图文件。

有关其工作原理的详细信息，网上有很多文章，其中有几篇：

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ http://blog.teamtreehouse.com/introduction-source-maps

继承人如何在webpack中执行源图：

https://webpack.js.org/configuration/devtool/

Answer 2

谢谢@Luke帮我找到了sourceURL：https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps#sourceurl_displayname

在bundle.js中，我找到了

eval("console.log('hello from b.js')\n\n\n//# sourceURL=webpack:///./b.js?");

最后一条评论//# sourceURL=指定源文件名。