Webpack 4 - 源地圖

Question

本文webpack 4: mode and optimization似乎表明當mode設置為development ， devtool設置為eval 。

我原以為這會觸發源映射生成，但在development或production模式下運行webpack-4-quickstart不會生成源映射。

如何使用 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模式生成源映射。