I have error '] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema"

Question

When I try to use command npm start, I get error

"] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."

Code: https://next.plnkr.co/edit/hEHTiPYQXQ7POWIH?open=lib%2Fscript.js&deferRun=1

Here is my full configuration code for webpack

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

    module.exports = {
        entry: './src/app/app.js',
        output: {
            path: './dist',
            filename: 'app.bundle.js',
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                },
                {
                    test: /\.html$/,
                    use: 'raw-loader'
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'sass-loader',
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader'
                        }
                    ]
                },
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: 'src/index.html',
                inject: 'body',
                hash: true
            }),
        ],
        devtool: "#inline-source-map"
    }

Error:

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[0] ** browser-sync config **
[0] { injectChanges: false,
[0]   files: [ './**/*.{html,htm,css,js}' ],
[0]   watchOptions: { ignored: 'node_modules' },
[0]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }

] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
[1]  - configuration.module has an unknown property 'loaders'. These properties are valid:
[1]    object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
[1]    -> Options affecting the normal modules (`NormalModuleFactory`).
[1]  - configuration.output.path: The provided value "./dist" is not an absolute path!
[1]    -> The output directory as **absolute path** (required).

Answer 1

I found your problem webpack use rules config not loader config so change your code into this

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

module.exports = {
    entry: 'src/app/app.js',
    output: {
        path:  path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.html$/,
                use: 'raw-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader',
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: 'body',
            hash: true
        }),
    ],
    devtool: "#inline-source-map"
}

Update: move your index.html file into same level of webpack.config.js

I dont see in the document they allow user to change into different path

Please let me know if you still have a problem