Webpack-dev-server doesn't generate source maps

Question

I use babel-loader, but can't figure out how to generate or where find source maps for transpiled files. I tried eval-source-map, inline-source-map, source-map.

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    entry: './src/script/index.jsx',
    output: {
        filename: 'bundle.js',
        sourceMapFilename: "bundle.js.map",
        publicPath: 'http://localhost:8090/assets'
    },
    debug: true,
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {   
                test: /\.js[x]?$/, 
                loaders: ['react-hot', 'jsx', 'babel'],
                exclude: /node_modules/ 
              },
              {
                test: /\.scss$/,
                loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
              },
              {
                test: /\.less$/,
                loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ]
              },
              {
                test: /\.css$/,
                loaders: [ 'style', 'css']
              },
              { test: /\.woff$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff" },
              { test: /\.woff2$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff2" },
              { test: /\.(eot|ttf|svg|gif|png)$/,    loader: "file-loader" }
        ]
    },
    plugins: [
        new BowerWebpackPlugin()
    ],
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

package.json

    {
    "name": "Won",
    "version": "0.0.1",
    "description": "Internal evidence application",
    "main": "index.jsx",
    "scripts": {
        "start": "npm run serve | npm run dev",
        "serve": "./node_modules/.bin/http-server -p 8080",
        "dev": "webpack-dev-server -d --progress --colors --port 8090"
    },
    "author": "And",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^5.8.23",
        "babel-loader": "^5.3.2",
        "bootstrap": "^3.3.5",
        "bootstrap-select": "^1.7.3",
        "bootstrap-table": "^1.8.1",
        "bower-webpack-plugin": "^0.1.8",
        "colresizable": "^1.5.2",
        "css-loader": "^0.16.0",
        "events": "^1.0.2",
        "extract-text-webpack-plugin": "^0.8.2",
        "file-loader": "^0.8.4",
        "flux": "^2.1.1",
        "http-server": "^0.8.0",
        "jquery": "^2.1.4",
        "jquery-ui": "^1.10.5",
        "json-markup": "^0.1.6",
        "jsx-loader": "^0.13.2",
        "less": "^2.5.1",
        "less-loader": "^2.2.0",
        "lodash": "^3.10.1",
        "node-sass": "^3.2.0",
        "object-assign": "^4.0.1",
        "path": "^0.11.14",
        "react": "^0.13.3",
        "react-hot-loader": "^1.2.9",
        "sass-loader": "^2.0.1",
        "style-loader": "^0.12.3",
        "svg-sprite-loader": "0.0.2",
        "url-loader": "^0.5.6",
        "webpack": "^1.12.0",
        "webpack-dev-server": "^1.10.1"
    }
}

edit://

After all this webpack.config.js and this package.json works for me.

edit2://

Now I use this webpack config

Note that given you are using Babel, you skip jsx-loader. So just ['hot-loader', 'babel'] is enough. Babel supports JSX by default. — Juho Vepsäläinen
– Juho Vepsäläinen, Commented Aug 31, 2015 at 17:25
Any progress on this? I'm running into the same problem. Thanks. — Pathsofdesign
– Pathsofdesign, Commented Nov 5, 2015 at 6:37
@Pathsofdesign for me it works now, but I don't know what I changed. If you want, I can send you my webpack.config and package.json. — Matt
– Matt, Commented Nov 8, 2015 at 11:44
@Matt I certainly would upvote an answer that has your updated webpack.config and package.json. :-) — Gabriel Kunkel
– Gabriel Kunkel, Commented Dec 7, 2015 at 17:49
@GabrielKunkel please see my edited question. There is my webpack.config and package.json which works for me — Matt
– Matt, Commented Dec 7, 2015 at 22:03

Titus · Accepted Answer · 2016-12-28 22:45:20Z

44

Use webpack-dev-server -d

-d is shorthand for --debug --devtool source-map --output-pathinfo.
output-pathinfo adds comments to the generated bundle that explain what module/files are included in what places. So in the generated code, the comment is added to this line of code: require(/* ./test */23) which says that 23 is pointing to the test module. This is mostly helpful when you're looking at the code Webpack has generated, and not so much when stepping through the debugger. I got this example from this relevant bit of documentation.
This all works because webpack-dev-server accepts all the same flags as webpack.
See this section in the docs for details.

Tips & gotchas

--content-base - by default the dev server will serve files in the directory you run the command in. If your build files are in build/, you need to specify --content-base build/ so the dev server will serve up files in the build directory
--inline - auto-reload whenever you save a file with some changes!

edited Dec 28, 2016 at 22:45

answered Jun 15, 2016 at 6:24

Titus

4,6776 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

angry kiwi Over a year ago

what does the output-pathinfo actually do?

Titus Over a year ago

@angrykiwi updated my answer, thanks! Also, great name btw ;)

Matias Faure · Accepted Answer · 2015-08-30 16:26:15Z

31

Use webpack -d

The d flag stands for development shortcut and it enables all of your developer tools such as source maps.

answered Aug 30, 2015 at 16:26

Matias Faure

8421 gold badge10 silver badges21 bronze badges

4 Comments

Matt Over a year ago

Webpack generates source maps for scss files, but not for jsx files. Please see my edited post, I attached my package.json

ryeguy Over a year ago

@CpILL it worked for me, I ran node_modules/.bin/webpack-dev-server -d --port 10141 --content-base build

CpILL Over a year ago

@ryeguy on webpack 2?

ryeguy Over a year ago

@CpILL No, I'm running webpack 1.13.3 and webpack-dev-server 1.16.2

Joe Phillips · Accepted Answer · 2020-01-21 19:58:51Z

5

Add {devtool:"source-map"} to your webpack.config.js

See more here

edited Jan 21, 2020 at 19:58

Joe Phillips

51.5k33 gold badges109 silver badges167 bronze badges

answered Jun 6, 2016 at 8:50

柴必青

611 silver badge1 bronze badge

2 Comments

Lukas Liesis Over a year ago

Thanks for the link, i found that in my webpack config it was cheap-module-eval-source-map and it didn't worked, i tried couple other options from this link and it works great now with eval-source-map

ptim Over a year ago

I'm also having issues with cheap-module-eval-source-map. Other types work fine for me.

David Makogon · Accepted Answer · 2016-12-13 20:07:57Z

1

Please add in you webpack.config.js file the following`

devtool: "#inline-source-map",

You can find clear information about it from the site of webpack` https://webpack.github.io/docs/configuration.html

Also please find attached screenshot of sourcemap part, from webpack site.

enter image description here

edited Dec 13, 2016 at 20:07

David Makogon

71k22 gold badges145 silver badges204 bronze badges

answered Dec 13, 2016 at 19:41

Kostya Harutyunyan

2092 silver badges3 bronze badges

Comments

Cody · Accepted Answer · 2017-12-13 11:02:21Z

0

All I did is change:

// package.json
{
    ...
    **from** "dev:serve": "webpack-dev-server",
    **to** "dev:serve": "webpack-dev-server -d",
    ...
}

Equivalent to: $ webpack-dev-server -d

Now I can utilize Ctrl + p in Chrome and I see my ES6 syntax to set breakpoints on.

Info

$ webpack-dev-server --version
webpack-dev-server 2.9.7
webpack 3.10.0

answered Dec 13, 2017 at 11:02

Cody

10.1k4 gold badges65 silver badges48 bronze badges

Collectives™ on Stack Overflow

Webpack-dev-server doesn't generate source maps

5 Answers 5

Tips & gotchas

2 Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Tips & gotchas

2 Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related