Webpack 5: devtool 验证错误，无效的配置对象

Question

在从Webpack 4迁移到Webpack 5时，我在使用devtool的空值（仅在生产模式下）时遇到了错误。

module.exports = {
    devtool: isProd ? '' : 'source-map',
    // entry: ...
    // output: ...
    // module: ...
}

控制台中的信息：

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

有什么办法可以避免在生产模式下生成源代码映射吗？在那里输入什么内容？

- ztom

Answer 1

回答自己的问题！剧透： false。

module.exports = {
    devtool: isProd ? false : 'source-map',
}

在 Webpack 4 中，可以使用空字符串来设置该值。但在 Webpack 5 中更加严格。Webpack 的 devtool 配置。

- ztom

---

isProd 参考的是什么？ - Ndrslmpk

这只是一个布尔值，用于判断应用程序是否处于生产模式。 - ztom

Answer 2

一些我的 "source-map" 像 "#source-map" 一样有一个 #，导致了这个错误。通过从字符串中删除 # 解决了这个错误。 之前：

devtool: (config.enabled.sourceMaps ? '#source-map' : false)

之后：

devtool: (config.enabled.sourceMaps ? 'source-map' : false)

- StealthTrails