Question

我有一个es6项目，我使用webpack + babel loader捆绑。当我打开devtools时，我可以看到＆＃39; webpack：//＆＃39;以及我所有的来源（es6）。

问题是：断点没有被击中，函数引用将我指向文件名＆＃39;？d41d

具有以下内容：

undefined


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

如果我从文档脚本向下钻取到我的包中的函数，我也可以访问？d41d文件

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

提前致谢。

Answer 1

这也刚刚开始发生在我身上，

我不确定问题的根源是什么，但将devtool从cheap-module-eval-source-map切换到sourceMap已经解决了问题。

Answer 2

Babel介绍了一种不同的源图格式here，而Webpack没有正确处理它。
修复程序合并在this PR中，在Webpack 1.14.0中发布。

Answer 3

这个帖子已经很晚了。但是，认为这将有助于未来的读者。我正在练习ES6 + Babel + Webpack组合并且遇到了这个视频，该视频介绍了如何使用Babel和Webpack为ES6 / ES2015设置开发环境。

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

＆＃13;

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

＆＃13;

<强> 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
};

我在上面的源代码中为正确的源地图添加的唯一一件事是＆＃34; devtool：＆＃39; source-map＆＃39;＆＃34;在webpack.config.js中（当然，在该视频中没有提到）。

webpack + babel loader源地图引用空文件

3 个答案: