使用webpack,ES6和Babel进行调试

这似乎应该比较容易实现,但是可惜。

我有ES6课:

'use strict';

export class BaseModel {  
    constructor(options) {
        console.log(options);
    }
};

和使用它的根模块:

'use strict';

import {BaseModel} from './base/model.js';

export let init = function init() {
    console.log('In Bundle');
    new BaseModel({a: 30});    
};

我的目标是:

  1. 通过Babel传递以上内容以获得ES5代码
  2. 使用webpack打包模块
  3. 能够调试结果

经过一番尝试,这是我拥有的webpack配置:

{
    entry: {
        app: PATH.resolve(__dirname, 'src/bundle.js'),
    },
    output: {
        path: PATH.resolve(__dirname, 'public/js'),
        filename: 'bundle.js'
    },        
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            }
        ]        
    }
}

在某种程度上,这似乎是可行的。

因此,我可以这样做:

devtools断点截图

我可以单击F11并输入代码,但无法评估BaseModel

控制台评估错误

这有点违反了调试的目的(或目的之一)。

我试着加入source-map-loader各种顺序有babel-loader

{
    test: /\.js$/,
    loader: "source-map-loader"
}

无济于事。

旁注1:如果我放弃webpack,而只是通过Babel将带有源映射的模块编译为System.js:

babel src/ --out-dir public/js/ --debug --source-maps inline --modules system
  • 一切正常。

在此处输入图片说明

旁注2:这?sourceMaps=true似乎根本没有做任何事情,因为,如果我从webpack中删除源地图配置-根本不会保留/生成任何源地图。人们会希望将最初由Babel制作的原始地图保存在生成​​的文件中。不。

任何建议将不胜感激