Webpack 4 - Sourcemaps

Question

这篇文章《webpack 4: mode and optimization》似乎表明，当mode设置为development时，devtool被设置为eval。

我本以为这会触发生成sourcemap，但在development或production模式下运行webpack-4-quickstart，结果没有生成任何sourcemap。

如何在webpack 4中生成sourcemap？

- kimsagro

---

似乎有些误导，因为虽然错误已经修复，但您仍然需要设置devtool配置选项。 - VuesomeDev

Answer 1

我认为您所期望的是包含源映射（例如'bundle.js.map'）的提取文件，但 eval 类型不会生成单独的文件：

  

eval-每个模块都使用eval（）和//@ sourceURL执行。 这很快。 主要缺点是它不能正确显示行号，因为它被映射到转译代码而不是原始代码（没有来自加载器的源图）。

但是，您始终可以通过手动配置 devtool 属性来实现：

devtool: 'source-map'

将提取源映射到文件中。 这里描述了各种类型的sourcemaps以及它们的成本和收益。

编辑:

实际上，在github上有一个问题与此相关的PR。目前，即使在生产模式下设置了devtool，UglifyJS插件仍然将sourceMap:false设置，并且不允许将源映射提取到单独的文件中。

- Tomasz Mularczyk

---

似乎上述问题在编辑下已经关闭，而且在webpack@4.29.0中不再出现该问题。 - Peter V. Mørch

源映射文件生成在哪里？ - Dimitri Kopriwa

Answer 2

最简单的设置是像以前一样添加 devtool：'source-maps'。

module.exports = {
  devtool: 'source-map',
  ...
};

但这会为开发模式和生产模式生成源代码映射。

- Csaba