Webpack AngularJS Source Files

Question

I struggled with the fact that my source maps worked in my application for quite some time. I have installed

devtool: 'source-map', 

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

I clicked on a very simple application using my FE Stack, hoping that someone could fix the problem, be it with webpack, angular or some other library. https://github.com/coreysnyder/Angular-Webpack3-Seed

Here are the versions that I run:

 { 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

I could fix the source maps for JS files by adding the babel bootloader. 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 continue 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'] } } ] }, [...] ] 

Learn more about babel-loader github repo

Answer 2

You may have to configure the source map for the different bootloaders separately.

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 like @ahmedelgabri

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

---

Old post before changing gigub OP.

Another option is to add devtoolLineToLine: true to 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

 output: isTest ? {} : { devtoolLineToLine: true, // <= this line sourceMapFilename: '[name].map', path: __dirname + '/dist', filename: '[name].bundle.js', publicPath: publicPath }, 

---

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

Answer 3

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

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

And that's why the text is blue

And I see the source just fine

The main problem is less-loader you need to pass the source of the map options for both, less-loader and css-loader check the readme

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

After that, you will be able to debug from the style bar like this

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

Hope this answers your question.