Webpack 4 - 源图

Question

本文的WebPack 4:模式和优化似乎表明,当mode设置为development将devtool被设置为eval.

我希望这能触发源代码生成,但在任一模式或模式下运行webpack-4-quickstart都不会生成源映射.developmentproduction

如何使用webpack 4生成源图？

Answer 1

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

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

但是你总是可以通过手动配置devtool属性来实现:

devtool: 'source-map'

这会将源映射提取到文件中.以下是源图的类型及其成本和收益.

编辑:

实际上github上有一个与此相关的公关问题.现在,UglifyJS插件sourceMap: false甚至已经在生产模式下设置,并且即使使用devtoolset 也不会将源映射提取为单独的文件.