How to create a source map for WebPack?

Question

My current webpack.config file

module.exports = {
    entry: "./entry.js",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "./bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
};

I was reading here https://webpack.github.io/docs/configuration.html and found the following:

output.sourceMapFilename

[file] is replaced by the filename of the JavaScript file.

[id] is replaced by the id of the chunk.

[hash] is replaced by the hash of the compilation.

I've added it above as you can see, but when my webpack watch runs, I don't see a map file?

How is this done?

dreyescat · Accepted Answer · 2015-11-18 18:28:50Z

16

There are two options here:

Using the CLI development shortcut along with your --watch option:

webpack -d --watch

or using the configuration devtool option in your webpack.config.js:

module.exports = {
    devtool: "source-map",
    entry: "./entry.js",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "./bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
};

answered Nov 18, 2015 at 18:28

dreyescat

13.9k5 gold badges52 silver badges38 bronze badges

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

4 Comments

Leon Gaban Over a year ago

Ah thanks! This worked webpack -d --watch the config tool didn't do anything until I used that command.

dreyescat Over a year ago

@LeonGaban The -d option is just a shortcut that includes, among others, the devtool one. The configuration option should work with webpack --watch.

Alex Volkov Over a year ago

I think this is not either/or situation. you need to have both -- '-d' command parameter and including devtool declaration along with sourceMapFilename definition in webpack.config.js

Roland Jegorov Over a year ago

Not sure what's wrong, but nothing from the suggestions work for me. I suspect it might be because of splitting the code into chunks (e.g. main.js, vendor.js).

Collectives™ on Stack Overflow

How to create a source map for WebPack?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related