Webpack 4 - 源地图

Question

这篇文章 webpack 4: mode and optimization 似乎建议当 mode 设置为 development 时 devtool 设置为 eval。

我原以为这会触发源映射生成，但是运行 development 或 production 模式下的 webpack-4-quickstart 导致没有生成源映射。

如何使用 webpack 4 生成源映射？

Answer 1

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

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

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

Answer 2

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

eval - Each module is executed with eval() and //@ sourceURL. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code (No Source Maps from Loaders).

但您始终可以通过手动配置 devtool 属性来完成，例如：

devtool: 'source-map'

这会将 source-maps 提取到文件中。 Here are described types of sourcemaps 以及它们的成本和收益。

编辑：

实际上 is a issue 在 github 上有一个与此相关的 PR。现在 UglifyJS 插件即使在生产模式下也设置了 sourceMap: false，即使设置了 devtool 也不允许提取 source-maps 来分隔文件。

Webpack 4 - 源地图

Webpack 4 - Sourcemaps

webpack

webpack-4