Webpack AngularJS Sourcemaps问题

Question

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

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

Answer 1

您可能必须分别为不同的加载器设置源映射。

对于'ng-annotate-loader'（文档）

use: [{
    loader: 'ng-annotate-loader',
    options: { 
        add: true, 
        single_quotes: true ,
        map: { inline: true, inFile: 'app.js', sourceRoot: __dirname + '/app' }}
}]

您可以less使用@ahmedelgabri建议的 文档选项

use: [{
    loader: "style-loader"
}, {
    loader: "css-loader", options: {
        sourceMap: true
    }
}, {
    loader: "less-loader", options: {
        sourceMap: true
    }
}]

OP github 更改之前的旧帖子。

如果您想使用，其他选项是在输出中添加devtoolLineToLine: true。但 devtoolLineToLine 已被弃用，因此请考虑更改为其他内容。 devtool：“源映射”演示图像devtool: 'source-map'devtool

output: isTest ? {} : {
    devtoolLineToLine: true, // <= this line

    sourceMapFilename: '[name].map',
    path: __dirname + '/dist',
    filename: '[name].bundle.js',
    publicPath: publicPath
},

或者，您可以使用devtool: 'eval'eval 或 eval 的某些变体，例如cheap-module-eval-source-map（类似的行为，但没有文件名）也适合我