Webpack AngularJS Sourcemaps issue

user_4760118 0
Viewed 1889

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.

enter image description here

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
source-maps webpack-dev-server angularjs webpack
3 Answers

I could fix your source maps for JS files, by adding the babel-loader. To do this, you need to install babel-loader:

npm i -D babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env

and then extend your rule for .js

 rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'ng-annotate-loader',
             options: { add: true, single_quotes: true }
           },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
         ]
       }, [...]
 ]

Ready further details on babel-loader github repo

user_85695190

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

user_10321670

There is nothing wrong with the Webpack config here https://github.com/coreysnyder/Angular-Webpack3-Seed

here is a gif using your code & setting a breakpoint in view1 file

enter image description here

And here is why the text is blue

enter image description here

And I can see the source just fine

enter image description here

The main issue is the less-loader you need to pass the source-maps options for both, the less-loader & css-loader check the readme

  {
    test: /\.less$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: 'less-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
  },

After doing this you will be able to debug from the styles panel like this

enter image description here

If you want to edit directly the .less files the readme mentions a blog post that can help with this https://github.com/webpack-contrib/less-loader#source-maps

I hope this answers your question

user_2131240
Related