How do I generate sourcemaps when using babel and webpack?

Question

I want to set up a config 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&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()
  ]
};

Looking though the docs hasn't really helped as I'm not sure what this problem is specific to.

Marrufo

FYI dont add debug for version 2 , i got The 'debug' property was removed in webpack 2. – Communist

Related post - what's the difference using eval and eval-source-map? – Aleras

where is the babel here used? Shouldn't this be "webpack" question only? – Gaeta

Answer 1

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.

Away

I can confirm (webpack 3.5): devtool is enough. No need for any debug value. – Leandraleandre

Just would like to add that if you're using React, you should find the specific config for it (create-react-app). – Seften

Where does it actually output the file to? – Golub

@MelbourneDeveloper, Typically, the file is named *.map, so if your file is main.js, then the sourcemap is called main.js.map. During development with webpack-dev-server, howerver, no sourcemap file is created on the file system, but it is magically created in memory and sent to the browser using Hot Module reloading technology. I hope that helps. :-) – Stipule

Answer 2

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

Perfect

I had to also include devtool: 'source-map' for it to work – Mooch

I had to include this in the css and sass loader options. – Casas

also solved problem in webpack 5, spent the whole day troubleshooting this - npmjs.com/package/uglifyjs-webpack-plugin#sourcemap – Clump

Answer 3

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$

Hege

Answer 4

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

Vlada

recent, pretty precise liste for build+rebuild performance is here in the official docs – Leandraleandre

Where / how is the dev variable set? – Swagger

in typical cases you might see .env files defined or mutations to process.env. this is just an example but it could look like this: const dev = process.env.development === true – Vlada

Answer 5

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

Kemppe

Answer 6

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&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },
  {test: /\.less$/, loader: "style!css!less"},
  { test: /\.styl$/, loader: 'style!css!stylus' },
  { test: /\.css$/, loader: 'style!css' }
]

Effect

The debug property has been removed in webpack 2. – Octroi

+1. Adding the include option is what fixed it for me. In webpack 2 it looks like this: rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")] – Professional