Question

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

“]无效的配置对象。已使用与API架构不匹配的配置对象来初始化Webpack。”

代码：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

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

如果您仍有问题，请告诉我

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

1 个答案: