logo标签列表

Webpack + Babel Loader源映射引用空文件

webpackbabeljssource-maps
13

我有一个使用webpack + babel loader的ES6项目。

当我打开开发者工具时，我可以看到'webpack：//'和所有我的源代码（ES6）。

问题是：断点不起作用，函数引用将我重定向到一个名为“?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"
  }

提前致谢。

3个回答
8

今天这种情况也发生在了我身上，

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

1
我使用了webpack网站上提到的所有可能的开发工具选项，但最终结果都是相同的。 - Gal Ziv
我相信你已经想到了这一点，但请确保在每次更改后重新启动你的开发服务器（或运行webpack），因为正在运行的服务器不会捕捉到webpack配置的更改。 - Chris Penner
我不使用开发服务器。每次都是手动运行的。但还是谢谢你提醒我。 - Gal Ziv
4
Babel引入了一种不同的源映射格式，在这里，而Webpack没有正确处理它。
修复已经合并在此PR中，并且在Webpack 1.14.0中发布。
0

可能有点晚来到这个帖子，但是我觉得这会对未来的读者有所帮助。我正在练习使用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("你好，世界！");
    }
}

app.js

import msg from './Message.js' import $ from 'jquery' $(function(){ $("#ShowBtn").on("click", function(){ var o = new msg(); o.show(); }); });
从上面的代码可以看出，它是一个使用jQuery库和自定义消息模块的JavaScript程序。当用户单击“ShowBtn”按钮时，将创建一个新的消息对象，并调用其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 //可选
};
在上述源代码中，我为了正确的源映射添加了一个东西，即在webpack.config.js中添加了"devtool：'source-map'"（当然，在那个视频中没有提到）。
还不算晚。我把它放了一段时间，但星期天回到工作岗位后我会测试它。测试结果我会及时更新。谢谢！ - Gal Ziv
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接