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, Aug 31 '15 at 17:25
Any progress on this? I'm running into the same problem. Thanks. — Pathsofdesign, Nov 05 '15 at 06: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, Nov 08 '15 at 11:44
@Matt I certainly would upvote an answer that has your updated webpack.config and package.json. :-) — Gabriel Kunkel, Dec 07 '15 at 17:49
@GabrielKunkel please see my edited question. There is my webpack.config and package.json which works for me — Matt, Dec 07 '15 at 22:03

Titus · Answer 1 · 2016-12-28T22:45:20.290

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!

@angrykiwi updated my answer, thanks! Also, great name btw ;) — Titus, Dec 28 '16 at 22:50

score 30 · Accepted Answer · answered Aug 30 '15 at 16:26

30

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 '15 at 16:26

FaureHu

792
8
18

Webpack generates source maps for scss files, but not for jsx files. Please see my edited post, I attached my package.json – Matt Aug 30 '15 at 16:39
@CpILL it worked for me, I ran `node_modules/.bin/webpack-dev-server -d --port 10141 --content-base build` – ryeguy Nov 13 '16 at 20:48
1

@ryeguy on webpack 2? – CpILL Dec 19 '16 at 00:33
@CpILL No, I'm running webpack 1.13.3 and webpack-dev-server 1.16.2 – ryeguy Dec 19 '16 at 21:04

score 4 · Answer 3 · edited Jan 21 '20 at 19:58

4

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

See more here

edited Jan 21 '20 at 19:58

Joe Phillips

44,686
25
93
148

answered Jun 06 '16 at 08:50

柴必青

51
1

1

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` – Lukas Liesis Sep 11 '16 at 05:02
I'm also having issues with `cheap-module-eval-source-map`. Other types work fine for me. – ptim Nov 10 '16 at 01:02

score 1 · Answer 4 · edited Dec 13 '16 at 20:07

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 '16 at 20:07

David Makogon

64,809
21
130
175

answered Dec 13 '16 at 19:41

Kostya Harutyunyan

159
1
3

score 0 · Answer 5 · answered Dec 13 '17 at 11:02

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

Webpack-dev-server doesn't generate source maps

5 Answers5

Tips & gotchas

Linked