Webpack AngularJS Sourcemaps issue

Question

I've been struggling with getting my source-maps working in my app for quite a while. I have set

devtool:  'source-map',

in the webpack configuration, but they are still not available in the Chrome devtools.

I pushed a really simple app using my FE Stack hoping someone could identify the issue, whether it is with webpack, angular, or some other library. https://github.com/coreysnyder/Angular-Webpack3-Seed

Here are the versions I'm running:

{ 
  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

You will probably have to setup source map for different loaders individually.

For 'ng-annotate-loader' (Docs)

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

For less you can use documentation option like @ahmedelgabri suggested

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

---

Old post before OP github changes.

Other option is to add devtoolLineToLine: true in your output, if you want to use devtool: 'source-map'. But devtoolLineToLine is deprecated, so consider changing devtool to something else. devtool: 'source-map' demo image

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

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

---

Alternatively you could use devtool: 'eval' or some variation of eval, like cheap-module-eval-source-map (similar behavior, but without file names) also works fine for me