自webpack 5以来的重大变更：devtool选项更为严格。

Question

我正在使用webpack配置react，以下是我的webpack配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path:path.resolve(__dirname, "dist"),
        filename: './dist/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "public/templates/", "budget_account2.html"),
        }),
    ],
}

当我运行npm run-script watch时，它会抛出错误：

配置对象无效。Webpack 使用不符合 API schema 的配置对象进行初始化。

• configuration.devtool 应与模式“^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”匹配。 自 webpack 5 以来有 BREAKING CHANGE: The devtool option is more strict。
  请严格遵循模式中关键字的顺序。

感谢所有人

- uncle bob

---

今天早上我遇到了这个问题，当我在命令行中发现了一个“-d”参数。 - James Barrass

Answer 1

正如错误提示所说。

configuration.devtool 应该与模式 "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$" 匹配。

在此处查看各种选项的描述。

要遵循它，您的 devtool 值应该：

• 可选地以 inline-、hidden- 或 eval- 开头，具体取决于您想要源映射的位置
• 如果要将源代码排除在映射之外，则可以选择跟随 nosources-
• 可选地跟随 cheap 或 cheap-module - cheap 表示快速重建时间，而 module 保留了原始行
• 最后跟随 source-map。

找出您想要的上述选项中的哪些选项，构造一个匹配的字符串，并使用它。例如，您可以使用 inline-nosources-cheap-source-map。

（您还可以使用 none 来完全省略源映射）

- CertainPerformance

---

谢谢@CertainPerformance的反馈。这是一个非常直接的信息，所以我尝试了很多情况，但仍然面临着同样的问题，即使是你建议的那个也一样。当然，文件配置已经更新了新内容。 - uncle bob

它为我解决了问题。现在，devtool: 'source-map' 工作正常。我不知道你为什么还有问题。 - Marcel van der Drift

遇到了相同的问题。在配置中指定了“source-map”开发工具，但仍然报错。 - Seiko Santana

"none"不起作用。它会抱怨与模式不匹配。您必须传递false。 - Eugen Konkov