Webpack 4 - 源图

Question

这篇文章webpack 4: mode and optimization似乎暗示当mode设置为development时，devtool被设置为eval。

我期望这会触发源代码生成，但是在webpack-4-quickstart或development模式下运行production会导致没有生成源映射。

如何使用webpack 4生成源图？

Answer 1

我认为你期望的是提取文件，包括像'bundle.js.map'这样的源映射，但是eval类型不会生成单独的文件：

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

但您可以通过手动配置devtool属性来执行此操作，如：

devtool: 'source-map'

这会将源映射提取到文件中。 Here are described types of sourcemaps及其成本和收益。

编辑：

实际上有gazub上的is a issue与PR有关。现在UglifyJS插件即使在生产模式下也设置了sourceMap: false，即使设置了devtool，它也不会将源映射提取到单独的文件中。

Answer 2

最简单的设置是像以前一样添加devtool: 'sourcemaps'。

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

但这会为development或production模式生成源图。