我有错误'] 无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化”

Question

当我尝试使用命令 npm start 时，出现错误

"] 配置对象无效。Webpack 已使用与 API 架构不匹配的配置对象进行初始化。"

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

这是我对 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"
    }

错误：

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

我发现你的问题是 webpack 使用规则配置而不是加载器配置，所以将你的代码改成这个

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"
}

更新：将您的 index.html 文件移动到同一级别的 webpack.config.js

我没有在文档中看到它们允许用户更改为不同的路径

如果还有问题请告诉我