javascript - webpack 5 does not accept any setting for devtool - Stack Overflow

admin管理员组

文章数量:1332377

When building with webpack 5, I get the error:

[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.

In my webpack.config.js however, I have the setting:

    devtool: 'eval-cheap-source-map',

Ive also tried eval as value which also does not work, although this website (/) seems to indicate that it should. I do not understand, what is going wrong here?

edit: my webpack.config.js

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

module.exports = {
    entry: './src/app.js',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'MyApp',
        }),
    ],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'var',
        library: 'MyApp'
    },
    resolve:{
        alias:{
            EVENTS: path.resolve(__dirname, "src/events"),
            MODELS: path.resolve(__dirname, "src/models"),
            GUI: path.resolve(__dirname, "src/gui"),
            HELPER: path.resolve(__dirname, "src/helper")
        }
    },
    devtool: 'eval-cheap-source-map',
    devServer: {
        watchContentBase: true,
        contentBase: path.resolve(__dirname, 'dist'),
        port: 9000
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            }
        ]
    },
}

my buildscript is webpack src/app.js -d --watch

When building with webpack 5, I get the error:

[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.

In my webpack.config.js however, I have the setting:

    devtool: 'eval-cheap-source-map',

Ive also tried eval as value which also does not work, although this website (https://webpack.js/configuration/devtool/) seems to indicate that it should. I do not understand, what is going wrong here?

edit: my webpack.config.js

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

module.exports = {
    entry: './src/app.js',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'MyApp',
        }),
    ],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'var',
        library: 'MyApp'
    },
    resolve:{
        alias:{
            EVENTS: path.resolve(__dirname, "src/events"),
            MODELS: path.resolve(__dirname, "src/models"),
            GUI: path.resolve(__dirname, "src/gui"),
            HELPER: path.resolve(__dirname, "src/helper")
        }
    },
    devtool: 'eval-cheap-source-map',
    devServer: {
        watchContentBase: true,
        contentBase: path.resolve(__dirname, 'dist'),
        port: 9000
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            }
        ]
    },
}

my buildscript is webpack src/app.js -d --watch

• javascript
• webpack

Share Follow edited Jul 16, 2021 at 13:15 mke21 asked Jul 16, 2021 at 11:37 mke21mke21 16511 silver badge1313 bronze badges 2

• Could you please share your build script and webpack.config.js, so that we have a minimum reproducible example? – Mario Varchmin Commented Jul 16, 2021 at 12:00
• Sure, I've added the info thanks – mke21 Commented Jul 16, 2021 at 13:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Remove the -d parameter from your build script. -d stands for devtool, but it is not followed by a parameter value in your mand.

本文标签： javascriptwebpack 5 does not accept any setting for devtoolStack Overflow