Webpack devtool 在开发模式下没有任何效果
Webpack devtool has no effect whatsoever in development mode
我对 webpack 的 devtool
设置在 webpack 4.41.5 中的工作方式感到很困惑。 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字符串包含source).
很明显,devtool
设置不应该只在生产模式下有效,因为许多选项都被标记为 production: no文档。
我是否严重误解了此设置的用途?
您正在向 webpack CLI 传递 -d
[1] 标志,该标志等同于(扩展)以下内容:
--debug --devtool cheap-module-eval-source-map --output-pathinfo
因此,您正在用 "cheap-module-eval-source-map"
.
覆盖每个配置的 devtool
配置 属性 值
尝试 运行 不带 -d
标志的命令,即 node_modules/.bin/webpack
.
我对 webpack 的 devtool
设置在 webpack 4.41.5 中的工作方式感到很困惑。 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字符串包含source).
很明显,devtool
设置不应该只在生产模式下有效,因为许多选项都被标记为 production: no文档。
我是否严重误解了此设置的用途?
您正在向 webpack CLI 传递 -d
[1] 标志,该标志等同于(扩展)以下内容:
--debug --devtool cheap-module-eval-source-map --output-pathinfo
因此,您正在用 "cheap-module-eval-source-map"
.
devtool
配置 属性 值
尝试 运行 不带 -d
标志的命令,即 node_modules/.bin/webpack
.