Question

我对webpack 4.41.5中webpack的devtool设置如何工作感到很困惑。 The documentation提供了可配置源映射的不同方式的完整列表，但需要权衡取舍。在生产模式下构建这些似乎有各种效果，但是在开发模式下，这些设置之间没有任何区别。这是一个示例：

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`
    },
}));

这是构建的输出：

$ 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

它们都是完全相同的，包括以下内容：

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");

它们显然都包含一个源映射，即使显式地请求不包含一个源映射（main-false.js），它们也包含完整的源，即使在不请求时也包含完整的源（main-nosources-source-map.js ，则解码后的base64字符串包含源）。

很显然，devtool并不是只在生产模式下有效的设置，因为在文档中许多选项都标记为 production：no 。

我是否严重误解了此设置应该做什么？

Answer 1

您正在向Webpack CLI传递-d [1]标志，该标志等于（扩展）以下内容：

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

因此，您将用devtool覆盖每个配置的"cheap-module-eval-source-map"配置属性值。

尝试运行不带-d标志（即仅node_modules/.bin/webpack）的命令。

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

Webpack devtool在开发模式下完全无效

1 个答案: