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

IT技术 reactjs typescript webpack
2021-04-07 08:25:02

我有一个从在线课程创建的简单 helloworld react 应用程序,但是我收到了这个错误:

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

};
6个回答

只需在“webpack.config.js”中从“loaders”更改为“rules”

因为 Webpack 1 中使用了 loader,Webpack2 中使用了规则。你可以看到有差异

我通过从解析数组中删除空字符串解决了这个问题。查看webpack 站点解析文档

//Doesn't work
module.exports = {
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
  ...
}; 

//Works!
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  }
  ...
};
为什么不再起作用了?在旧版本的 webpack 中,我总是在extensions数组值的第一个索引处看到空字符串
2021-06-02 08:25:02

我不完全知道是什么原因造成的,但我是这样解决的。
重新安装整个项目,但记住 webpack-dev-server 必须全局安装。
我解决了一些服务器错误,比如找不到 webpack,所以我使用 link 命令链接了 Webpack。
在输出中解决一些绝对路径问题。

在开发服务器中 object: inline: false

webpack.config.js

module.exports = {
    entry: "./src/js/main.js",
    output: {
        path:__dirname+ '/dist/',
        filename: "bundle.js",
        publicPath: '/'
    },
    devServer: {
        inline: false,
        contentBase: "./dist",
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude:/(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }

};

包.json

{
  "name": "react-flux-architecture-es6",
  "version": "1.0.0",
  "description": "egghead",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cichy/react-flux-architecture-es6.git"
  },
  "keywords": [
    "React",
    "flux"
  ],
  "author": "Jarosław Cichoń",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/cichy/react-flux-architecture-es6/issues"
  },
  "homepage": "https://github.com/cichy/react-flux-architecture-es6#readme",
  "dependencies": {
    "flux": "^3.1.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0"
  }
}
只需删除 webpack-dev-server 的本地安装并全局安装它就可以为我解决这个问题。
2021-06-10 08:25:02
我认为该loaders选项已替换为ruleswebpack.js.org/concepts/loaders
2021-06-16 08:25:02

尝试以下步骤:

npm uninstall webpack --save-dev

其次是

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

然后你应该可以再次吞咽。为我解决了这个问题。

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

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

如果这仍然是 webpack 3 的问题怎么办?
2021-06-06 08:25:02