How do I generate sourcemaps when using babel and webpack?
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
bundle.js.map 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
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.