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

reactjs React.js

LEYA

2020-03-13

我有一个通过在线课程创建的简单的helloworld react应用,但是出现此错误:

无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-配置具有未知属性“ postcss”。这些属性是有效的:object {amd?,bail?,cache?,context?,dependencies?,devServer?,devtool?,entry,externals?,loader?,module?,name?,node?,output?,performance?。 ,插件,配置文件,recordsInputPath,records utputPath,recordsPath,resolve,resolveLoader,stats,target,watch,watchOptions?}对于错别字:请更正它们。
对于加载程序选项:webpack 2不再允许配置中的自定义属性。应该更新加载程序,以允许通过module.rules中的加载程序选项传递选项。在更新加载程序之前,可以使用LoaderOptionsPlugin将这些选项传递给加载程序:插件:[new webpack.LoaderOptionsPlugin({//测试:/.xxx$/,//可能仅将此功能应用于某些模块选项:{postcss: ...}})]-configuration.resolve具有未知属性'root'。这些属性是有效的:object {alias?,aliasFields?,cachePredicate?,descriptionFiles?,forceExtension?,enforceModuleExtension?,extensions,fileSystem?,mainFields,mainFiles?,moduleExtensions?,modules?,plugins?,resolver?,symlinks ?,unsafeCache ?, useSyncFileSystemCalls?}-configuration.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'
            }
        }
    }

};

第1525篇《无效的配置对象。已使用与API模式不匹配的配置对象初始化了Webpack》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

10个回答
Itachi小哥 2020.03.13

我和你有同样的错误。

npm卸载webpack --save-dev

npm install webpack@2.1.0-beta.22 --save-dev

解决这个问题!。

乐米亚 2020.03.13

在我的情况下,问题是项目所在的文件夹的名称,其名称为“!”。我要做的就是重命名文件夹,一切就绪。

古一蛋蛋 2020.03.13

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

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist/assets" is not an absolute path!

我从使用毛线开始,这为我解决了问题:

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环境

番长梅 2020.03.13

当您使用冲突版本(角度js)时,通常会发生此错误。因此,Webpack无法启动应用程序。您只需删除webpack并重新安装即可对其进行修复。

npm uninstall webpack --save-dev
npm install webpack --save-dev

重新启动应用程序,一切正常。

我希望能够帮助某人。干杯

猴子小哥 2020.03.13

我改变了装载机规则webpack.config.js的文件和更新包html-webpack-pluginwebpackwebpack-cliwebpack-dev-server到随后的最新版本,它的工作对我来说!

猿米亚 2020.03.13

在webpack.config.js中,将加载器:[..]替换为规则:[..]对我有用。

GilL 2020.03.13

将“加载程序”更改为“规则”对我有用(webpack v4)

GilGilPro 2020.03.13

我猜你的webpack版本是2.2.1。我认为您应该使用此迁移指南-> https://webpack.js.org/guides/migrating/

另外,您可以使用TypeSCript + Webpack 2的此示例

Eva阿飞 2020.03.13

只需从“ webpack.config.js”中的“加载程序”更改为“规则”

因为在Webpack 1中使用了加载程序,在Webpack2中使用了规则。您可以看到存在差异

YLD 2020.03.13

请尝试以下步骤:

npm uninstall webpack --save-dev

其次是

npm install webpack@2.1.0-beta.22 --save-dev

然后,您应该可以再次吞食。为我解决了此问题。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android