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

Question

当我尝试使用命令npm启动时，我会得到错误

"]无效的配置对象。使用与API模式不匹配的配置对象进行了初始化的WebPack。"

代码：https：//next.plnkr.co/edit/hehtipyqxq7powih?open = lib/script.js＆amp;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使用规则config note config config，因此将代码更改为

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

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

请让我知道您是否还有问题