Webpack AngularJS Sourcemaps问题

发布时间：2020-12-17 18:06:42 所属栏目：安全来源：网络整理

导读：我一直在努力让我的源地图在我的应用程序中运行很长一段时间.我已经设定 devtool: 'source-map', 在webpack配置中,但它们在Chrome devtools中仍然不可用. 我使用我的FE Stack推了一个非常简单的应用程序希望有人可以识别问题,无论是webpack,angular还是其他

我一直在努力让我的源地图在我的应用程序中运行很长一段时间.我已经设定

devtool:  'source-map',

在webpack配置中,但它们在Chrome devtools中仍然不可用.

enter image description here

我使用我的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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!