CODEWITHSUNDEEP
javascriptwebpackwebpack-4
jlh
jlh

Reputation: 4717

Webpack devtool has no effect whatsoever in development mode

I'm quite confused about how webpack's devtool setting works in webpack 4.41.5. The documentation offers an entire list of different ways that source maps can be configured, with different trade-offs. While building in production mode these seem to have various effects, but in development mode, there is no difference between these settings whatsoever. Here's an example:

entry.js:

// trivial entry point
console.log('hello world');

webpack.config.js:

module.exports = [
    false, 'eval', 'eval-cheap-source-map', 'eval-cheap-module-source-map', 'eval-source-map',
    'cheap-source-map', 'cheap-module-source-map', 'inline-cheap-source-map', 'inline-cheap-module-source-map',
    'source-map', 'inline-source-map', 'hidden-source-map', 'nosources-source-map'
].map(tool => ({
    entry:   './entry.js',
    devtool: tool,
    output: {
        path: __dirname,
        filename: `./[name]-${tool}.js`
    },
}));

Here's the output of the build:

$ node_modules/.bin/webpack -d
< lots of output >
$ sha1sum main-*.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-cheap-module-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-cheap-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval-cheap-module-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval-cheap-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-false.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-hidden-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-inline-cheap-module-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-inline-cheap-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-inline-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-nosources-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-source-map.js

They're all exactly the same and include this:

eval("console.log('hello world');\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9lbnRyeS5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL2VudHJ5LmpzPzA5OGYiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coJ2hlbGxvIHdvcmxkJyk7XG4iXSwibWFwcGluZ3MiOiJBQUFBOyIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./entry.js\n");

They obviously all include a source map, even when explicitely requesting not to include one (main-false.js) and they all include the full source even when requested not to do so (main-nosources-source-map.js, the decoded base64 string contains the source).

Clearly the devtool setting is not one that is supposed to only have an effect in production mode, since many of the options are labeled as production: no in the documentation.

Did I seriously misunderstand what this setting is supposed to do?

Upvotes: 3

Views: 1030

Answers (1)

sdgluck
sdgluck

Reputation: 27327

You are passing webpack CLI the -d [1] flag which equates (expands) to the following:

--debug --devtool cheap-module-eval-source-map --output-pathinfo

Hence you are overwriting each configuration's devtool config property value with "cheap-module-eval-source-map".

Try running your command without the -d flag, i.e. just node_modules/.bin/webpack.

[1] https://webpack.js.org/api/cli/#shortcuts

Upvotes: 3

Related Questions