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

181

我有一个简单的helloworld react应用,是从在线课程中创建的,但是我得到了以下错误:

无效的配置对象。Webpack已经初始化使用一个与API模式不匹配的配置对象。 - 配置具有未知属性“postcss”。这些属性有效:object {amd?,bail?,cache?,context?,dependencies?, devServer?,devtool?,entry,externals?,loader?,module?,name? node?,output?,performance?,plugins?,profile?,recordsInputPath? recordsOutputPath?,recordsPath?,resolve?,resolveLoader?,stats? target?,watch?,watchOptions?} 对于拼写错误:请纠正它们。
对于加载程序选项:webpack 2不再允许在配置中使用自定义属性。 应该更新装载机以允许通过module.rules中的loader选项传递选项。 直到装载程序更新为止,可以使用LoaderOptionsPlugin将这些选项传递给装载程序: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { postcss:... } }) ] - 配置.resolve具有未知属性'root'。这些属性有效:object {alias?,aliasFields? cachePredicate?,descriptionFiles?,enforceExtension? enforceModuleExtension?,extensions?,fileSystem?,mainFields? mainFiles?,moduleExtensions?,modules?,plugins? resolver?,symlinks?,unsafeCache?,useSyncFileSystemCalls?} - 配置.resolve.extensions [0]不应为空。

我的webpack文件为:

// work with all paths in a cross-platform manner
const path = require('path');

// plugins covered below
const { ProvidePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// configure source and distribution folder paths
const srcFolder = 'src';
const distFolder = 'dist';

// merge the common configuration with the environment specific configuration
module.exports = {

    // entry point for application
    entry: {
        'app': path.join(__dirname, srcFolder, 'ts', 'app.tsx')
    },

    // allows us to require modules using
    // import { someExport } from './my-module';
    // instead of
    // import { someExport } from './my-module.ts';
    // with the extensions in the list, the extension can be omitted from the 
    // import from path
    resolve: {
        // order matters, resolves left to right
        extensions: ['', '.js', '.ts', '.tsx', '.json'],
        // root is an absolute path to the folder containing our application 
        // modules
        root: path.join(__dirname, srcFolder, 'ts')
    },

    module: {
        loaders: [
            // process all TypeScript files (ts and tsx) through the TypeScript 
            // preprocessor
            { test: /\.tsx?$/,loader: 'ts-loader' },
            // processes JSON files, useful for config files and mock data
            { test: /\.json$/, loader: 'json' },
            // transpiles global SCSS stylesheets
            // loader order is executed right to left
            {
                test: /\.scss$/,
                exclude: [path.join(__dirname, srcFolder, 'ts')],
                loaders: ['style', 'css', 'postcss', 'sass']
            },
            // process Bootstrap SCSS files
            {
                test: /\.scss$/,
                exclude: [path.join(__dirname, srcFolder, 'scss')],
                loaders: ['raw', 'sass']
            }
        ]
    },

    // configuration for the postcss loader which modifies CSS after
    // processing
    // autoprefixer plugin for postcss adds vendor specific prefixing for
    // non-standard or experimental css properties
    postcss: [ require('autoprefixer') ],

    plugins: [
        // provides Promise and fetch API for browsers which do not support
        // them
        new ProvidePlugin({
            'Promise': 'es6-promise',
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        // copies image files directly when they are changed
        new CopyWebpackPlugin([{
            from: path.join(srcFolder, 'images'),
            to: path.join('..', 'images')
        }]),
        // copies the index.html file, and injects a reference to the output JS 
        // file, app.js
        new HtmlWebpackPlugin({
            template: path.join(__dirname, srcFolder, 'index.html'),
            filename:  path.join('..', 'index.html'),
            inject: 'body',
        })
    ],

    // output file settings
    // path points to web server content folder where the web server will serve 
    // the files from file name is the name of the files, where [name] is the 
    // name of each entry point 
    output: {
        path: path.join(__dirname, distFolder, 'js'),
        filename: '[name].js',
        publicPath: '/js'
    },

    // use full source maps
    // this specific setting value is required to set breakpoints in they
    // TypeScript source in the web browser for development other source map
    devtool: 'source-map',

    // use the webpack dev server to serve up the web application
    devServer: {
        // files are served from this folder
        contentBase: 'dist',
        // support HTML5 History API for react router
        historyApiFallback: true,
        // listen to port 5000, change this to another port if another server 
        // is already listening on this port
        port: 5000,
        // proxy requests to the JSON server REST service
        proxy: {
            '/widgets': {
                // server to proxy
                target: 'http://0.0.0.0:3010'
            }
        }
    }

};

在我的情况下,我在我的AureliaJs应用程序中运行了一个错误的命令来运行我的单元测试,例如:"au run test"而不是"au test",所以要小心。希望能帮助到别人,节省时间。 - undefined
35个回答

9
在webpack.config.js中,将loaders: [..]替换为rules: [..] 这对我很有效。

6

我曾经遇到同样的问题,我通过安装最新版本的npm来解决它:

npm install -g npm@latest

然后修改webpack.config.js文件来解决- configuration.resolve.extensions[0] should not be empty.

现在resolve extension应该像这样:

resolve: {
    extensions: [ '.js', '.jsx']
},

然后运行 npm start


这对我有用。在我的webpack.config.js文件中,我有一个条目,如extentions:['','.js','.jsx']。我删除了空项'',然后它就起作用了。configuration.resolve.extensions [0]是指webpack.config.js文件中resolve:{extensions:['','.js','.jsx']}下的第一项。 - Ajitesh

3

当我将webpack引入使用npm init创建的项目时,出现了相同的错误信息。

无效的配置对象。Webpack已使用不符合API架构的配置对象初始化。 - configuration.output.path: 提供的值“dist/assets”不是绝对路径!

我重新开始使用yarn解决了我的问题:

brew update
brew install yarn
brew upgrade yarn
yarn init
yarn add webpack webpack-dev-server path
touch webpack.config.js
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
yarn add html-webpack-plugin
yarn start

我发现下面的链接很有帮助: 使用webpack和Babel设置React环境

我尝试了这个,除了一些警告之外,一切都正常,但是当我执行最后一个命令“yarn start”时,它会给我一个错误“找不到命令start”,你知道如何解决吗?谢谢! - Tony Chen

3

对我而言,需要更改:

cheap-module-eval-source-map

为:

eval-cheap-module-source-map

这是从v4到v5的微妙差别。详情请参见v4v5文档。


3

我也遇到了同样的问题,通过对我的 web.config.js 文件进行一些更改来解决了问题。FYI,我正在使用最新版本的 webpack 和 webpack-cli。这个诀窍真的救了我一天的时间。我已经附上了我的 web.config.js 文件的示例,包括修改前和修改后的版本。

修改前:

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: './index.js',
    output: {
         filename: 'bundle.js'
    },
    module: {
        loaders : [
           { test: /\.js?/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}

修改后:我只是将模块对象中的loaders替换为rules,您可以在我的代码片段中看到。

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules : [
            { test: /\.js?/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}

希望这能帮助某人解决这个问题。


3
"babel-loader",不是"bable-loader"。 - AntonAL

2

一个有点不太可能的情况。

我已经删除了 yarn.lock 文件,该文件引用了旧版的 webpack。

因此,请检查您的 yarn.lock 文件中的差异作为一种可能性。


2

我在webpack.config.js文件中将loaders改为rules,并将包html-webpack-pluginwebpackwebpack-cliwebpack-dev-server更新到最新版本,然后它就可以正常工作了!


1
当我使用path.resolve()来设置'entry'和'output'的值时,出现了这个错误。尝试使用entry: __dirname + '/app.jsx'代替entry: path.resolve(__dirname + '/app.jsx')

1

我和你一样遇到了同样的错误。

运行命令:npm uninstall webpack --save-dev

&

使用npm安装webpack@2.1.0-beta.22 --save-dev

问题已解决!


1
在我的情况下,问题出在项目所在文件夹的名称上,其中包含了一个“!”符号。我所做的只是将文件夹重命名,然后一切准备就绪。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接