webpack - Webpack 4 - 源图

Question

这篇文章webpack 4: mode and optimization似乎建议将 whenmode设置development为devtool设置为eval.

我期待这会触发源映射生成，但在or模式下运行webpack-4-quickstart会导致不生成源映射。developmentproduction

如何使用 webpack 4 生成源地图？

Answer 1

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

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

但是您始终可以通过手动配置devtool属性来做到这一点，例如：

devtool: 'source-map'

这会将源映射提取到文件中。这里描述了源地图的类型及其成本和收益。

编辑：

实际上github上有一个与此相关的PR问题。现在 UglifyJS 插件sourceMap: false甚至在生产模式下也设置了，即使设置了它也不允许提取源映射到单独的文件devtool。

Answer 2

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

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

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