Webpack - devtool source-map VS eval-source-map

Question

--devtool source-map和有eval-source-map什么区别？

Answer 1

webpack 文档有一个方便的图表，说明这些不同选项可能适合哪些情况。

它们显示eval-source-map出构建速度慢，重建速度快，建议用于开发，但用于生产，因为“每个模块都使用 eval() 执行，并且 SourceMap 作为 DataUrl 添加到 eval()。最初它很慢，但它提供快速的重建速度并生成真实的文件。行号被正确映射，因为它被映射到原始代码。它为开发生成了最优质的 SourceMap。”

另一方面，构建和source-map重建都很慢，但被标记为适合生产，因为“完整的 SourceMap 作为单独的文件发出。它向捆绑包添加了参考注释，以便开发工具知道在哪里可以找到它。”

基于另一篇 SO 帖子Webpack - devtool: source-map for CSS and eval-source-map for JS? 看起来这个人source-map在 CSS 文件映射方面运气更好，而eval-source-map在 JS 文件方面更有帮助。我无法判断这是否适用于所有用例，因为 webpack 文档没有明确说明这里的差异，并且eval-source-map历史上一直适用于我在 CSS 和 JS 开发中的用例。

链接帖子的答案确实显示了如何在需要时使用这两个选项