How do I generate sourcemaps when using babel and webpack?

Posted on

How do I generate sourcemaps when using babel and webpack? – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and webpack. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about How do I generate sourcemaps when using babel and webpack?.

Problem :

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: [

  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&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.

Solution :

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.

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 })

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  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$

If optimizing for dev + production, you could try something like this in your config:

const dev = process.env.NODE_ENV !== 'production'

// in webpack.shared.config

  devtool: dev ? 'eval-cheap-module-source-map' : 'source-map', 

From the docs:

  • devtool: “eval-cheap-module-source-map” offers SourceMaps that only maps lines (no column mappings) and are much faster
  • devtool: “source-map” cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. It’s something for production.

Another option is to return false for production with the assumption you do not need sourcemaps for production builds.

I am using webpack 2.1.0-beta.19

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.

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.


On a large project I find … eval-source-map rebuild time is ~3.5s … inline-source-map rebuild time is ~7s

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: [
  {test: /.less$/, loader: "style!css!less"},
  { test: /.styl$/, loader: 'style!css!stylus' },
  { test: /.css$/, loader: 'style!css' }

Leave a Reply

Your email address will not be published. Required fields are marked *