How do I generate sourcemaps when using babel and webpack

Question

I m new to webpack  and I need a hand in setting up to generate sourcemaps  I m running webpack serve from the command line  which compiles successfully  But I really need sourcemaps  This is my webpack config js   var webpack   require  webpack     module exports        output        filename   main js       publicPath    assets           cache  true    debug  true    devtool  true    entry           webpack hot only-dev-server            src components main js          stats        colors  true      reasons  true         resolve        extensions         js     jsx        alias           styles     dirname     src styles          mixins     dirname     src mixins          components     dirname     src components           stores     dirname     src stores           actions     dirname     src actions                module        preLoaders           test      js jsx           exclude   node modules         loader   jsxhint              loaders           test      js jsx           exclude   node modules         loader   react-hot babel-loader                 test     sass         loader   style-loader css-loader sass-loader outputStyle expanded amp indentedSyntax                 test     scss         loader   style-loader css sass                 test      png jpg woff woff2           loader   url-loader limit 8192                 plugins        new webpack HotModuleReplacementPlugin        new webpack NoErrorsPlugin             I m really new to webpack  and looking though the docs hasn t really helped as I m not sure what this problem is specific to

User · Answer

Even same issue I faced  in browser it was showing compiled code  I have made below changes in webpack config file and it is working fine now    devtool    inline-source-map    debug  true    and in loaders I kept babel-loader as first option   loaders            loader   babel-loader       include   path resolve   dirname   src             test     js    exclude    app  lib    node modules    loader   ng-annotate babel         test     html    loader   raw             test      jpe g png gif svg   i      loaders           file hash sha512 amp digest hex amp name  hash   ext           image-webpack bypassOnDebug amp optimizationLevel 7 amp interlaced false                test     less    loader   style css less        test     styl    loader   style css stylus         test     css    loader   style css

User · Answer

On Webpack 2 I tried all 12 devtool options  The following options link to the original file in the console and preserve line numbers  See the note below re  lines only   https   webpack js org configuration devtool  devtool best dev options                                  build   rebuild      quality                       look eval-source-map                 slow    pretty fast  original source               worst inline-source-map               slow    slow         original source               medium cheap-module-eval-source-map    medium  fast         original source  lines only   worst inline-cheap-module-source-map  medium  pretty slow  original source  lines only   best   lines only  Source Maps are simplified to a single mapping per line  This usually means a single mapping per statement  assuming you author is this way   This prevents you from debugging execution on statement level and from settings breakpoints on columns of a line  Combining with minimizing is not possible as minimizers usually only emit a single line   REVISITING THIS  On a large project I find     eval-source-map rebuild time is  3 5s     inline-source-map rebuild time is  7s

User · Answer

If optimizing for dev   production  you could try something like this in your config  const dev   process env NODE ENV      production      in config      devtool  dev    eval-cheap-module-source-map     source-map      From the docs   devtool   quot eval-cheap-module-source-map quot  offers SourceMaps that only maps lines  no column mappings  and are much faster devtool   quot source-map quot  cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk  It   s something for production   I am using webpack 2 1 0-beta 19

User · Answer

Maybe someone else has this problem at one point  If you use the UglifyJsPlugin in webpack 2 you need to explicitly specify the sourceMap flag  For example   new webpack optimize UglifyJsPlugin   sourceMap  true

User · Answer

In order to use source map  you should change devtool option value from true to the value which available in this list  for instance source-map  devtool   source-map       devtool   source-map  - A SourceMap is emitted

User · Answer

Minimal webpack config for jsx with sourcemaps   var path   require  path    var webpack   require  webpack     module exports        entry     src index jsx       output        path   path resolve   dirname  build        filename   bundle js         devtool   eval-source-map      module           loaders                    test    jsx             loader   babel-loader           exclude   node modules           query              presets    es2015    react                                      Running it   Jozsefs-MBP react-webpack-babel joco  webpack -d Hash  c75d5fb365018ed3786b Version  webpack 1 13 2 Time  3826ms         Asset     Size  Chunks             Chunk Names     bundle js   1 5 MB       0   emitted   main bundle js map  1 72 MB       0   emitted   main       221 hidden modules Jozsefs-MBP react-webpack-babel joco

[javascript] How do I generate sourcemaps when using babel and webpack?

Examples related to javascript

Examples related to webpack

Examples related to build-process

Examples related to babeljs

Examples related to source-maps