无效的配置对象。 Webpack 已使用与 API 模式不匹配的配置对象初始化？

Question

这是我的 webpack.config.js:

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

module.exports = {
    entry: './src/App.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'js/app.js'
    },
    resovle: {
        alias: {
            page: path.resolve(__dirname, 'src/page')
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                      loader: 'url-loader',
                      options: {
                          limit: 8192,
                          name: 'resource/[name].[ext]'
                      }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: [
                    {
                      loader: 'url-loader',
                      options: {
                          limit: 8192,
                          name: 'resource/[name].[ext]'
                      }
                    }
                ]
            }  
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new ExtractTextPlugin('css/[name].css'),
    //公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        })
    ],
    devServer: {
        port: 8081
    }
  };

我正在使用 webpack@3.10.0，webpack-dev-server@2.9.7，当我 "npm run dev" 得到这个错误。

无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 - 配置有一个未知属性 'resovle'。这些属性是有效的： object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, 插件?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } 对于错别字：请更正。对于加载器选项：webpack 2 不再允许配置中的自定义属性。应该更新加载程序以允许通过 module.rules 中的加载程序选项传递选项。在加载程序更新之前，可以使用 LoaderOptionsPlugin 将这些选项传递给加载程序：插件：[ 新 webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // 可能仅适用于某些模块选项： { 解决：... } }) ] 错误！代码生命周期错误！错误号 1 错误！后端@1.0.0 开发人员：webpack-dev-server --open 错误！退出状态 1 错误！错误！在 backend@1.0.0 开发脚本失败。错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误！此运行的完整日志可在以下位置找到：错误！ C:\Users\admin\AppData\Roaming\npm-cache_logs18-03-21T09_48_18_093Z-debug.log

如何更改webpack.config.js?

Answer 1

您的 Webpack 配置中存在拼写错误。检查单词 resovle 并将其更改为 resolve.

resolve {
    alias: {
        page: path.resolve(__dirname, 'src/page')
    }
}

消息错误告诉你出了什么问题： Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'resovle'

无效的配置对象。 Webpack 已使用与 API 模式不匹配的配置对象初始化？

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

webpack

webpack-dev-server