webpack + babel loader source map引用空文件
webpack + babel loader source map references empty file
我有一个 es6 项目,我使用 webpack + babel loader 打包。
当我打开开发工具时,我可以在下面看到 '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"
}
提前致谢。
这也是今天才开始发生在我身上的,
我不确定问题的根源是什么,但是将 devtool
从 cheap-module-eval-source-map
切换到 sourceMap
暂时解决了问题。
这个帖子来得太晚了。但是,认为这将对未来的读者有所帮助。我只是在练习 ES6 + Babel + Webpack 组合,并看到了这个视频,它解释了如何使用 Babel 和 Webpack 为 ES6/ES2015 设置开发环境。
https://www.youtube.com/watch?v=wy3Pou3Vo04
我完全按照视频中提到的方式进行了尝试,并且没有任何问题。如果有人在使用源 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
};
我在上面的源代码中为正确的源映射添加的唯一一件事是 webpack.config.js 中的 "devtool: 'source-map'"(当然,那个视频中没有提到)。
Babel 引入了一种不同的 sourcemap 格式 here,Webpack 没有正确处理它。
该修复已在 this PR 中合并,并 在 Webpack 1.14.0.
中发布
我有一个 es6 项目,我使用 webpack + babel loader 打包。 当我打开开发工具时,我可以在下面看到 '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"
}
提前致谢。
这也是今天才开始发生在我身上的,
我不确定问题的根源是什么,但是将 devtool
从 cheap-module-eval-source-map
切换到 sourceMap
暂时解决了问题。
这个帖子来得太晚了。但是,认为这将对未来的读者有所帮助。我只是在练习 ES6 + Babel + Webpack 组合,并看到了这个视频,它解释了如何使用 Babel 和 Webpack 为 ES6/ES2015 设置开发环境。
https://www.youtube.com/watch?v=wy3Pou3Vo04
我完全按照视频中提到的方式进行了尝试,并且没有任何问题。如果有人在使用源 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 };
我在上面的源代码中为正确的源映射添加的唯一一件事是 webpack.config.js 中的 "devtool: 'source-map'"(当然,那个视频中没有提到)。
Babel 引入了一种不同的 sourcemap 格式 here,Webpack 没有正确处理它。
该修复已在 this PR 中合并,并 在 Webpack 1.14.0.