自 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 架构不匹配。

• configuration.devtool 应匹配模式“^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”。 自 webpack 5 以来的重大更改：devtool 选项更加严格。
  请严格遵循模式中关键字的顺序。

谢谢大家

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

，完全省略源映射）

Answer 2

如果您仍然遇到问题，请确保您运行的 webpack 命令不带“-d”选项，因为这也用于指定 devtool 设置。