Webpack源映射指向縮小的bundle

Question

我正在為現有項目設置一個Webpack構建過程，並且已經遇到了源映射的一些問題。

我正在使用devtool: 'eval-source-map', 如果瀏覽器中發生錯誤，則堆棧跟蹤中的每個文件/行號都指向壓縮到Webpack包中的單行的文件。

例如，堆棧跟蹤的第一行可能如下所示：

未捕獲的錯誤：foo

在child.initialize（eval at（ http://127.0.0.1:8000/js/dist/index.js:1270:1 ），：45：10）

單擊文件名/行號會將包中的鏈接到Webpack所包含的“包含”錯誤發生的文件所在的行。 看起來像這樣：

/* 223 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
// Below is the line it points to, and it goes on to have the entire file on the same line
eval("/* WEBPACK VAR INJECTION */(function(Backbone, $, _) { ... 

但是整個文件內容都在這一行上，所以這完全沒用。

即使我將我的Webpack配置修改為這樣，也會發生這種情況：

var path = require('path'),
    webpack = require('webpack');

module.exports = {
    entry: {
        'indexhead': './static/js/main.js',
        'accounthead': './static/js/accountManager.js'
    },
    output: {
        path: path.join(__dirname, 'static/js/dist'),
        filename: '[name].js'
    },
    devtool: 'eval-source-map',
};

對於此處概述的其他類型的開發源地圖類型也會發生。 如果我使用devtool: source-map的生產設置devtool: source-map ，我仍然會指向一個包含每個腳本的巨型包文件，但至少這些行是“展開”的，我會看到錯誤發生的位置。

我該如何解決這個問題，或至少進一步排除故障？

Answer 1

我確實試圖重現這個問題而且我找到了這個。 也許這不是你要找的地方。

將代碼與webpack捆綁在一起后，代碼在Chrome控制台中出錯。

當我點擊main.js：2166鏈接時，瀏覽器會導航我到捆綁的代碼。

當我刷新Chrome瀏覽器時，我看到了原始文件'layout.js'的鏈接。

單擊此鏈接將帶我進入非捆綁代碼。

如果我使用帶有devtool的Webpack構建網頁：'eval-source-map'，我得到與Webpack-dev-server相同的結果。 您可以檢查構建js文件是否具有嵌入式sourceMap。

Answer 2

我可以復制您的問題的唯一方法是在Chrome設置中停用源地圖：

我得到的是這樣的東西：

當我啟用源地圖時，我得到了如下圖所示的內容。 通過單擊右上角的文件名，我被帶到了正確的位置。