Webpack源映射指向缩小的bundle

Question

Webpack源映射指向缩小的bundle

Ale*_*pin 5 javascript source-maps webpack

我正在为现有项目设置一个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, $, _) { ...

Run Code Online (Sandbox Code Playgroud)

但是整个文件内容都在这一行上,所以这完全没用.

即使我将我的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',
};

Run Code Online (Sandbox Code Playgroud)

对于此处概述的其他类型的开发源地图类型也会发生.如果我使用生产设置devtool: source-map,我仍然会指向一个包含每个脚本的巨型包文件,但至少这些行是"展开"的,我会看到错误发生的位置.

我该如何解决这个问题,或至少进一步排除故障？