Webpack 4 - 源地图 [英] Webpack 4 - Sourcemaps

问题描述

这篇文章webpack 4:模式和优化建议当 mode 设置为 development 时，devtool 设置为 eval.

This article webpack 4: mode and optimization seems to suggest that when mode is set to development the devtool is set to eval.

我原以为这会触发源映射生成，但运行了 webpack-4-quickstart在 development 或 production 模式下都不会生成源映射.

I was expecting this to trigger sourcemap generation but running the webpack-4-quickstart in either development or production mode results in no sourcemaps being generated.

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

How can I generate sourcemaps with webpack 4?

推荐答案

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

I think what you are expecting is extracted file including source maps like 'bundle.js.map', but eval type doesn't generate separate file:

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

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 属性来实现，例如:

But you can always do it by manually configuring devtool property like:

devtool: 'source-map'

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

which will extract source-maps to a file. Here are described types of sourcemaps along with their costs and benefits.

实际上在 github 上有是一个问题，其 PR 与这个.现在 UglifyJS 插件即使在生产模式下也设置了 sourceMap: false 并且即使设置了 devtool 也不允许将源映射提取到单独的文件.

Actually there is a issue on github with a PR related to this. Right now UglifyJS plugin has set sourceMap: false even in production mode and it doesn't let extracting source-maps to separate file even with devtool set.

这篇关于Webpack 4 - 源地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！