我一直在努力让我的源地图在我的应用程序中运行很长一段时间.我已经设定
devtool: 'source-map',
在webpack配置中,但它们在Chrome devtools中仍然不可用.
我使用我的FE Stack推了一个非常简单的应用程序希望有人可以识别问题,无论是webpack,angular还是其他库. https://github.com/coreysnyder/Angular-Webpack3-Seed
以下是我正在运行的版本：
{
CoreyApp: '1.0.0',npm: '4.4.4',ares: '1.10.1-DEV',http_parser: '2.7.0',icu: '57.1',modules: '48',node: '6.9.0',openssl: '1.0.2j',uv: '1.9.1',v8: '5.1.281.84',zlib: '1.2.8'
}
OSX 10.12.6
解决方法
您可能需要单独为不同的加载器设置源映射.
对于’ng-annotate-loader'(Docs)
use: [{
loader: 'ng-annotate-loader',options: {
add: true,single_quotes: true,map: { inline: true,inFile: 'app.js',sourceRoot: __dirname + '/app' }}
}]
少花了你可以使用像@ahmedelgabri建议的documentation选项
use: [{
loader: "style-loader"
},{
loader: "css-loader",options: {
sourceMap: true
}
},{
loader: "less-loader",options: {
sourceMap: true
}
}]
OP github之前的旧帖子更改.
其他选项是在output中添加devtoolLineToLine: true,如果你想使用devtool：’source-map’.但是devtoolLineToLine已被弃用,因此请考虑将devtool更改为其他内容. devtool: ‘source-map’ demo image
output: isTest ? {} : {
devtoolLineToLine: true,// <= this line
sourceMapFilename: '[name].map',path: __dirname + '/dist',filename: '[name].bundle.js',publicPath: publicPath
},
或者你可以使用devtool：’eval’或eval的一些变体,比如cheap-module-eval-source-map(类似的行为,但没有文件名)also works fine for me
