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&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.
The 'debug' property was removed in webpack 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 })
devtool: 'source-map'
for it to work
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',
}
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
dev
variable set?
.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
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
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' }
]
debug
property has been removed in webpack 2.
include
option is what fixed it for me. In webpack 2 it looks like this: rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Success story sharing
denug
property has been removed in webpack 2.devtool
is enough. No need for any debug value.*.map
, so if your file ismain.js
, then the sourcemap is calledmain.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. :-)