webpack + babel loader source map references empty file

I have an es6 project which I bundle using webpack + babel loader. When I open the devtools I can see 'webpack://' and all my sources (es6) underneath.

The problems are: breakpoints don't hit and function references directs me to a file name '?d41d

which has the following content:

undefined


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

if I drill down from document script to a function in my bundle I get to the ?d41d file as well

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']
                }
            }
        ]
    }
};

and part of package.json in case it might help:

"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"
  }

Thanks in advance.

Babel introduced a different sourcemap format here and Webpack didn't handle it correctly.
The fix was merged in this PR, and released in Webpack 1.14.0.

This also just started happening to me today,

I'm not sure what the root of the problem is, but switching devtool from cheap-module-eval-source-map to sourceMap has fixed the problem for the time being.

Quite late to this thread. But, thought this is going to help future readers. I am just practicing ES6 + Babel + Webpack combination and came across this video which explains on setting up develop environment for ES6/ES2015 using Babel and Webpack.

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

I tried exactly as mentioned in that video and worked for me with no issues. In case if anyone is having trouble with source code/video:

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>

webpack.config.js

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

module.exports = {
    devtool: 'source-map',
    entry: ['./src/app.js'],
    output: {
        path: './build',
        filename: 'app.all.js'
    },
    module:{
        loaders:[{
            test: /\.js$/,
            include: path.resolve(__dirname, "src"),
            loader: 'babel-loader',
            query:{
                presets: ['es2015']
            }
        }]
    },
    watch: true //optional
};

The only one thing I added in the above source code for proper source maps is "devtool: 'source-map'" in webpack.config.js (of course, not mentioned in that video).

来源：https://stackoverflow.com/questions/39206648/webpack-babel-loader-source-map-references-empty-file

标签

Webpack

babeljs

source-maps