“devtool：'source-map'”上的 Webpack 配置错误答案

【问题标题】：Webpack configuration error on "devtool: 'source-map',"“devtool：'source-map'”上的 Webpack 配置错误
【发布时间】：2021-04-01 18:50:34
【问题描述】：

我正在尝试遵循 tutorial 的教科书反应应用程序。但是，当我运行命令sh -c webpack --watch -d --output ./target/classes/static/built/bundle.js（本教程中提到的npm run-script watch）时，出现以下错误。

[webpack-cli] 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.

我的 webpack.config.js 如下。

let path = require('path');

module.exports = {
    entry: './src/main/js/App.js',
    devtool: 'source-map',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|eot|otf|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {}
                    }
                ]
            }
        ]
    }
};

知道问题出在哪里吗？

我正在使用 Webpack 5.29.0。

【问题讨论】：

标签： reactjs npm webpack

【解决方案1】：

webpack --watch -d --output ./target/classes/static/built/bundle.js 这里 -d 表示 devtool 选项，它会覆盖文件中给出的选项。在 webpack 5 中，你不能将 empty 传递给 devtool。

这就是问题所在。

【讨论】：