[英]How do I get source mapping to work with Chrome Dev Tools and webpack?
I'm using webpack-dev-server -d --inline
to serve my dist/app.js file generated through webpack. 我正在使用
webpack-dev-server -d --inline
来提供通过webpack生成的dist / app.js文件。 I've activated source mapping and it is generating an app.js.map file in my dist/ folder, along with //# sourceMappingURL=app.js.map
at the end of the file, yet Chrome devtools doesn't seem to be using the source mapping. 我已激活源映射,它正在我的dist /文件夹中生成app.js.map文件,以及文件末尾的
//# sourceMappingURL=app.js.map
,但Chrome devtools似乎没有使用源映射。
I thought that maybe the problem was that Chrome couldn't see the raw source files (since only the dist/ folder is being served by webpack-dev-server), so I've tried mapping the served file to the local file in dev tools. 我想也许问题是Chrome无法看到原始源文件(因为只有dist /文件夹由webpack-dev-server提供),所以我尝试将服务文件映射到dev中的本地文件工具。
Unfortunately I then get a "workspace mapping mismatch", I'm not sure why the file would be different, nor am I sure that this would fix the source mapping problem even if the files did match. 不幸的是,我得到了“工作区映射不匹配”,我不确定为什么文件会有所不同,我也不确定即使文件匹配也会修复源映射问题。
I would appreciate any help. 我将不胜感激任何帮助。
Configuring publicPath did the trick for me. 配置publicPath对我来说很有用。 In your case you could try to point to the same path of your bundled output.
在您的情况下,您可以尝试指向捆绑输出的相同路径。
var path = require("path");
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'app.js'
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.