Objek konfigurasi tidak valid. Webpack telah diinisialisasi menggunakan objek konfigurasi yang tidak cocok dengan skema API

Saya memiliki aplikasi reaksi helloworld sederhana ini yang dibuat dari kursus online, namun saya mendapatkan kesalahan ini:

Objek konfigurasi tidak valid. Webpack telah diinisialisasi menggunakan objek konfigurasi yang tidak cocok dengan skema API. - konfigurasi memiliki properti 'postcss' yang tidak diketahui. Properti ini valid: object {amd ?, bail ?, cache ?, context ?, dependencies ?, devServer ?, devtool ?, entry, externals ?, loader ?, module ?, name ?, node ?, output ?, performance? , plugin ?, profile ?, recordsInputPath ?, recordsO utputPath ?, recordsPath ?, resol ?, resolLoader ?, stats ?, target ?, watch ?, watchOptions? } Jika salah ketik: harap perbaiki.
Untuk opsi loader: webpack 2 tidak lagi mengizinkan properti khusus dalam konfigurasi. Loader harus diperbarui untuk memungkinkan penerusan opsi melalui opsi loader di module.rules. Hingga pemuat diperbarui, seseorang dapat menggunakan LoaderOptionsPlugin untuk meneruskan opsi ini ke loader: plugins: [webpack.LoaderOptionsPlugin baru ({// test: /.xxx$/, // dapat menerapkan ini hanya untuk beberapa opsi modul: {postcss: ...}})] - configuration.resolve memiliki properti 'root' yang tidak diketahui. Properti ini valid: object {alias ?, aliasFields ?, cachePredicate ?, descriptionFiles ?, EnegceExtension ?, EnegceModuleExtension ?, extensions ?, fileSystem ?, mainFields ?, mainFiles ?, moduleExtensions ?, modules ?, plugins?, Resolver ?, symlinks ?, unsafeCache ?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] tidak boleh kosong.

File webpack saya adalah:

// 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'
            }
        }
    }

};

Saya tidak tahu persis apa penyebabnya, tapi saya menyelesaikannya dengan cara ini.
Instal ulang seluruh proyek tetapi ingat bahwa webpack-dev-server harus diinstal secara global.
Saya berjalan melalui beberapa kesalahan server seperti webpack tidak dapat ditemukan, jadi saya menautkan Webpack menggunakan perintah tautan.
Dalam keluaran Menyelesaikan beberapa masalah jalur absolut.

Di devServer 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']
                }
            }
        ]
    }

};

package.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"
  }
}

Ubah saja dari "loader" menjadi "rules" di "webpack.config.js"

Karena loader digunakan di Webpack 1, dan aturan di Webpack2. Anda bisa melihat ada perbedaan .

Saya memecahkan masalah ini dengan menghapus string kosong dari array penyelesaian saya. Lihat dokumentasi penyelesaian di situs webpack .

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

//Works!
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  }
  ...
};

Coba langkah-langkah di bawah ini:

npm uninstall webpack --save-dev

diikuti oleh

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

Maka Anda harus bisa meneguknya lagi. Memperbaiki masalah untuk saya.

Untuk orang-orang seperti saya, yang baru memulai: Kata loaderskunci diganti dengan rules; Padahal konsep itu tetap mewakili loader. Jadi saya webpack.config.js, untuk aplikasi React, adalah sebagai berikut:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    rules : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

Saya kira versi webpack Anda adalah 2.2.1. Saya pikir Anda harus menggunakan Panduan Migrasi ini -> https://webpack.js.org/guides/migrating/

Selain itu, Anda dapat menggunakan contoh TypeSCript + Webpack 2 ini .

Di webpack.config.js ganti loader: [..] dengan aturan: [..] Ini berhasil untuk saya.

Ini berfungsi menggunakan, rulesbukanloaders

module : {
  rules : [
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel-loader'
    }
  ]
}

File konfigurasi Webpack telah berubah selama bertahun-tahun (kemungkinan dengan setiap rilis utama). Jawaban atas pertanyaan:

Mengapa saya mendapatkan kesalahan ini

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

karena file konfigurasi tidak cocok dengan versi webpack yang digunakan.

Jawaban yang diterima tidak menyatakan ini dan jawaban lain menyinggung hal ini tetapi tidak menyatakannya dengan jelas npm install [email protected] , Ubah saja dari "loader" ke "rules" di "webpack.config.js " , dan ini . Jadi saya memutuskan untuk memberikan jawaban saya atas pertanyaan ini.

Menghapus instalasi dan menginstal ulang webpack, atau menggunakan versi global webpack tidak akan menyelesaikan masalah ini. Menggunakan versi webpack yang benar untuk file konfigurasi yang digunakan adalah hal yang penting.

Jika masalah ini diperbaiki saat menggunakan versi global, kemungkinan itu berarti bahwa versi global Anda adalah "lama" dan format file webpack.config.js yang Anda gunakan adalah "lama" sehingga semuanya cocok dan melanggar semuanya sekarang berfungsi . Saya mendukung semuanya, tapi ingin pembaca tahu mengapa mereka berhasil.

Setiap kali Anda mendapatkan konfigurasi webpack yang Anda harap akan menyelesaikan masalah Anda ... tanyakan pada diri Anda sendiri untuk versi apa konfigurasi webpack tersebut.

Ada banyak sumber bagus untuk mempelajari webpack. Beberapa diantaranya adalah:

• Situs Webpack resmi yang menjelaskan konfigurasi Webpack, saat ini di versi 4.x . Meskipun ini adalah sumber yang bagus untuk mencari cara kerja webpack, tidak selalu yang terbaik dalam mempelajari bagaimana 2 atau 3 opsi di webpack bekerja sama untuk memecahkan masalah. Tetapi ini adalah tempat terbaik untuk memulai karena memaksa Anda untuk mengetahui versi webpack yang Anda gunakan. :-)

• Webpack (v3?) Oleh Contoh - mengambil pendekatan singkat untuk mempelajari webpack, memilih masalah dan kemudian menunjukkan cara menyelesaikannya di webpack. Saya suka pendekatan ini. Sayangnya tidak mengajarkan webpack 4 tapi masih bagus.

• Menyiapkan Webpack4, Babel, dan React dari awal, ditinjau kembali - Ini khusus untuk React tetapi bagus jika Anda ingin mempelajari banyak hal yang diperlukan untuk membuat aplikasi satu halaman react.

• Webpack (v3) - The Confusing Parts - Bagus dan mencakup banyak hal. Itu tertanggal 10 Apr 2016 dan tidak mencakup webpack4 tetapi banyak poin pengajaran yang valid atau berguna untuk dipelajari.

Ada lebih banyak sumber daya bagus untuk mempelajari webpack4 dengan contoh, silakan tambahkan komentar jika Anda tahu orang lain. Mudah-mudahan, artikel webpack mendatang akan menyatakan versi yang digunakan / dijelaskan.

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan menginstal versi npm terbaru:

npm install -g npm@latest

dan kemudian ubah webpack.config.jsfile untuk diselesaikan

- configuration.resolve.extensions [0] tidak boleh kosong.

sekarang menyelesaikan ekstensi akan terlihat seperti:

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

lalu lari npm start.

Kesalahan ini biasanya terjadi ketika Anda memiliki versi yang bertentangan (angular js). Jadi webpack tidak dapat menjalankan aplikasi. Anda cukup memperbaikinya dengan menghapus webpack dan menginstalnya kembali.

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

Mulai ulang aplikasi Anda dan semuanya baik-baik saja.

Saya berharap bisa membantu seseorang. Bersulang

Saya mendapat pesan kesalahan yang sama saat memperkenalkan webpack ke proyek yang saya buat dengan 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!

Saya mulai kembali menggunakan benang yang memperbaiki masalah saya:

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

Saya menemukan tautan berikut bermanfaat: Siapkan Lingkungan React Menggunakan webpack dan Babel

Saya mengubah loader untuk aturan dalam webpack.config.jsberkas dan memperbarui paket html-webpack-plugin, webpack, webpack-cli, webpack-dev-serverke versi terbaru maka itu bekerja untuk saya!

Saya memiliki masalah yang sama dan saya mengatasinya dengan membuat beberapa perubahan pada file web.config.js saya. FYI saya menggunakan versi terbaru webpack dan webpack-cli. Trik ini baru saja menyelamatkan hariku. Saya telah melampirkan contoh file web.config.js milik saya sebelum dan sesudah versi.

Sebelum:

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

Sesudah: Saya baru saja mengganti loader ke aturan dalam objek modul seperti yang Anda lihat di cuplikan kode saya.

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

Mudah-mudahan, Ini akan membantu seseorang untuk keluar dari masalah ini.

Kesalahan ini terjadi saat saya menggunakan path.resolve (), untuk menyiapkan pengaturan 'entri' dan 'keluaran'. entry: path.resolve(__dirname + '/app.jsx'). Coba sajaentry: __dirname + '/app.jsx'

Dalam kasus saya, masalahnya adalah nama folder tempat proyek itu berada, yang bertanda "!" Yang saya lakukan hanyalah mengganti nama folder dan semuanya siap.

Saya memiliki masalah yang sama, dan dalam kasus saya, yang harus saya lakukan hanyalah kebaikan

baca pesan kesalahan ...

Pesan kesalahan saya mengatakan:

Objek konfigurasi tidak valid. Webpack telah diinisialisasi menggunakan objek konfigurasi yang tidak cocok dengan skema API. - configuration.entry harus salah satu dari ini: function | objek {: string tidak kosong | [string tidak kosong]} | string tidak kosong | [string tidak kosong] -> Titik masuk kompilasi. Detail: * configuration.entry harus berupa turunan dari fungsi -> Fungsi yang mengembalikan objek entri, string entri, larik entri, atau janji untuk hal-hal ini. * configuration.entry ['styles'] harus berupa string. -> String diselesaikan menjadi modul yang dimuat saat startup. *configuration.entry ['styles'] tidak boleh berisi item 'C: \ MojiFajlovi \ Faks \ 11Master \ 1Semestar \ UDD-UpravljanjeDigitalnimDokumentima \ Projekat \ nc-front \ node_modules \ bootstrap \ dist \ css \ bootstrap.min.css' dua kali .

Seperti baris pesan kesalahan yang dicetak tebal, saya baru saja membuka angular.jsonfile dan menemukan stylestampilan seperti ini:

"styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css" <-- **marked line**
    ],

... jadi saya baru saja menghapus garis yang ditandai ...

dan semuanya berjalan dengan baik. :)

Saya memiliki kesalahan yang sama dengan Anda.

npm uninstall webpack --save-dev

&

npm instal [email protected] --save-dev

selesaikan itu !.

Saya memiliki webpack versi 3 jadi saya menginstal webpack-dev-server versi 2.11.5 sesuai dengan https://www.npmjs.com/package/webpack-dev-server halaman "Versi" saat ini. Dan kemudian masalahnya hilang.