Enable sourcemaps with webpack for dev and prod environments

Sourcemaps can be a handy tool dur­ing devel­op­ment and pro­duc­tion for the fol­low­ing reasons:

  • Pro­vide us bet­ter means to debug our appli­ca­tions as we can still exam­ine the orig­i­nal source code over gen­er­ated one.

  • Allow us to see exactly on which line the error occurred.

  • Allow us to see the nice folder struc­ture of your project in the chrome dev­tools as show below.

webpack-devtools


devel­op­ment envi­ron­ment — gives bet­ter performance

{
    devtool: 'inline-source-map'
} 

pro­duc­tion envi­ron­ment — keeps the bun­dle size small.

{
  devtool: 'source-map'
}


You may also like...