Webpack + babel loader исходная карта ссылки пустой файл

У меня есть проект es6, который я связываю с помощью загрузчика webpack + babel. Когда я открываю devtools, я вижу "webpack://" и все мои источники (es6) внизу.

Проблемы: точки останова не попадают, и ссылки на функции ссылаются на имя файла '? d41d

который имеет следующее содержание:

undefined


/** WEBPACK FOOTER **
 ** 
 **/

Если я перейду из документа script к функции в моем пакете, я также получу файл? d41d

my webpack.config.js:

module.exports = {

    debug: true,
    devtool: 'cheap-module-eval-source-map',
    entry: "entry.js",
    output: {
        path: "C:/html5/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: ['transform-object-assign'],
                    sourceMaps: ['inline']
                }
            }
        ]
    }
};

и часть package.json в случае, если это может помочь:

"devDependencies": {
    "ava": "^0.16.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-object-assign": "^6.8.0",
    "babel-preset-es2015": "^6.13.2",
    "cheerio": "^0.22.0",
    "chokidar-cli": "^1.2.0",
    "eslint": "^3.3.1",
    "html-to-js": "0.0.1",
    "jsdoc": "^3.4.0",
    "jsdom": "^9.4.2",
    "minami": "^1.1.1",
    "obfuscator": "^0.5.4",
    "sinon": "^1.17.5",
    "uglify-js": "^2.7.3",
    "webpack": "^1.13.2",
    "yargs": "^5.0.0"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }

Спасибо заранее.

Ответы

Ответ 1

Babel внедрил другой формат исходной карты здесь, и Webpack не справился с этим правильно.
Исправление было объединено в этот PR и выпущено в Webpack 1.14.0.

Ответ 2

Это также началось со мной сегодня,

Я не уверен, в чем корень проблемы, но переключение devtool с cheap-module-eval-source-map на sourceMap пока не исправлено.

Ответ 3

Довольно поздно в эту тему. Но подумал, что это поможет будущим читателям. Я просто практикую ES6 + Babel + Webpack и наткнулся на это видео, которое объясняет настройку среды разработки для ES6/ES2015 с помощью Babel и Webpack.

https://www.youtube.com/watch?v=wy3Pou3Vo04

Я старался точно так же, как упоминалось в этом видео, и работал у меня без проблем. Если у кого-то возникли проблемы с исходным кодом/видео:

Package.json

{
  ...
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "webpack": "^1.13.2"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

Message.js

export default class Message {
    show(){
        alert("Hello world!");
    }
}

app.js

import msg from './Message.js'
import $ from 'jquery'

$(function(){
    $("#ShowBtn").on("click", function(){
        var o = new msg();
        o.show();   
    });
});

index.htm

<html>
<head>
	<title></title>
	<script type="text/javascript" src="build/app.all.js"></script>
</head>
<body>
	<button id="ShowBtn">Show</button>
</body>
</html>