잘못된 구성 개체입니다.API 스키마와 일치하지 않는 구성 개체를 사용하여 웹 팩이 초기화되었습니다.

잘못된 구성 개체입니다.API 스키마와 일치하지 않는 구성 개체를 사용하여 웹 팩이 초기화되었습니다.

온라인 코스에서 만든 간단한 hellowold react 앱이 있는데 다음과 같은 오류가 나타납니다.

잘못된 구성 개체입니다.API 스키마와 일치하지 않는 구성 개체를 사용하여 웹 팩을 초기화했습니다. - 구성에 알 수 없는 속성 'postcss'가 있습니다.유효합니다. 로더?, 개체 {amd?, bail?, 캐시?, 컨텍스트?, 종속성?, devServer?, devtool?, 엔트리?, 외부?, 로더?, 모듈?, 이름?, 노드?, 출력?, 성능?, 플러그인?, 프로파일, 레코드?InputPath?, recordsO utputPath?, resolvePath?, resolveLoader?, stats?, target?, watchOptions?} 타타경: 정정부부부부부부다다다다다다.
로더 옵션의 경우: 웹 팩 2에서는 구성에서 사용자 지정 속성을 더 이상 허용하지 않습니다.는 modulemodule.rules의 옵션을 할 수 .Loader Options Plugin : 플러그인 : [ new webpack ] 。Loader Options Plugin({// test: /.xx$/, // 테스트: { postcss: ...} } } }) - configuration.configuration.componentation.componentation resolveroot 、 'root 、 'root 、 ''' 'root ' '가가가가가가가가 enforceModule?입니다. 시스템?, mainFields?, mainFiles?, " 안전하지 캐시?, SystemCallsuseSyncFileSystemCalls?} - configuration.resolve.extensions [ 0 ]- 。

웹 팩 파일은 다음과 같습니다.

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

};

"webpack.config.js"에서 "loaders"에서 "rules"로 변경하기만 하면 됩니다.

로더는 Webpack 1에서 사용되고 규칙은 Webpack 2에서 사용되기 때문입니다.차이가 있는 것을 알 수 있습니다.

해상도 어레이에서 빈 문자열을 제거하여 이 문제를 해결했습니다.웹 팩 사이트에서 해결 문서를 확인하십시오.

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

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

정확히 무슨 원인인지는 모르겠지만, 저는 이렇게 해결해요.
webpack-dev-server 라고 합니다.
webpack과 같은 서버 오류를 찾을 수 없기 때문에 link 명령을 사용하여 webpack을 링크했습니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★♪

devServer 。object: inline: false

webpack.config.syslog

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 의 설정 파일은, 수년에 걸쳐(각 메이저릴리즈와 같이) 변경되고 있습니다.질문에 대한 답변:

이 에러가 표시되는 이유

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

컨피규레이션파일이 사용하고 있는 Web 팩의 버전과 일치하지 않기 때문입니다.

수용된 답변에는 이 답변과 다른 답변이 언급되어 있지 않지만 npm install webpack@2.1.0-beta.22, "webpack.config.js"의 "loaders"에서 "rules"로 변경하기만 하면 됩니다.그래서 저는 이 질문에 대한 답을 제시하기로 했습니다.

웹 팩을 제거했다가 다시 설치하거나 글로벌 버전의 웹 팩을 사용해도 이 문제는 해결되지 않습니다.사용하는 컨피규레이션파일에 적절한 버전의 Web 팩을 사용하는 것이 중요합니다.

글로벌 버전을 사용할 때 이 문제가 해결되었다면 글로벌 버전이 "오래된" 상태이고 webpack.config.js 파일 형식이 "오래된" 상태이므로 일치하고 viola가 작동합니다.나는 모든 것이 잘 되는 것에 찬성하지만, 왜 그들이 잘 되었는지 독자들이 알기를 바란다.

문제가 해결되기를 바라는 웹 팩 구성을 얻을 때마다 해당 구성이 어떤 버전의 웹 팩에 적합한지 자문해 보십시오.

웹 팩을 학습하기 위한 좋은 자료가 많이 있습니다.예를 들어 다음과 같습니다.

• 웹 팩 구성을 설명하는 공식 웹 팩 웹 사이트(현재 버전 4.x).이것은 웹 팩의 동작 방법을 찾는 데 매우 유용한 리소스이지만, 웹 팩의 2가지 또는 3가지 옵션이 어떻게 연동되어 문제를 해결하는지 학습하는 데 항상 최적인 것은 아닙니다.다만, 사용하고 있는 Web 팩의 버전을 알 수 있도록 하기 위해서, 이 페이지를 시작하는 것이 가장 좋습니다. :- )

• 예를 들어 웹 팩(v3?) - 웹 팩을 학습하고 문제를 선택한 다음 웹 팩에서 해결하는 방법을 보여주는 한 입 크기의 접근 방식을 사용합니다.나는 이 방식이 마음에 든다.아쉽게도 웹팩4는 가르치고 있지 않지만 여전히 좋습니다.

• Webpack4, Babel, React 셋업, 재방문 - 리액트 전용이지만 리액트 싱글 페이지 앱을 만드는 데 필요한 많은 것을 배우고 싶다면 좋습니다.

• Web pack (v3) - 혼란스러운 부품 - 양호하고 폭넓은 영역을 커버합니다.2016년 4월 10일자로 webpack4는 다루지 않지만 많은 교육 포인트가 유효하거나 학습에 도움이 됩니다.

예를 들어 webpack4 학습에 도움이 되는 리소스가 많이 있습니다.다른 사람을 알고 있다면 코멘트를 추가해 주세요.향후 웹 팩 기사에는 사용/설명된 버전이 기재되어 있기를 바랍니다.

다음의 순서를 시험해 보겠습니다.

npm uninstall webpack --save-dev

이어서

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

그러면 또 꿀꺽꿀꺽 마실 수 있을 거예요.날 위해 문제를 해결했어.

이 오류는 일반적으로 버전이 충돌할 때 발생합니다(각도 js).따라서 웹 팩은 응용 프로그램을 시작할 수 없습니다.Web 팩을 떼어내 재인스톨 하는 것으로, 간단하게 수정할 수 있습니다.

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

애플리케이션을 재기동하면, 모든 것이 정상입니다.

저는 누군가를 도울 수 있기를 바랍니다.건배.

최에 、 은 the : The 그loaders키워드는 로 대체됩니다.rules로더의 개념을 나타내고 있습니다만,그래서 나의webpack.config.js반응하다

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;

웹 팩 버전이 2.2.1인 것 같습니다.이 이행가이드 --> https://webpack.js.org/guides/migrating/ 를 참조해 주세요.

또한 이 유형의 예를 사용할 수 있습니다.스크립트 + Web Pack 2

해서 되는 거예요.rulesloaders

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

webpack.config.js에서 로더: [..]를 규칙: [..]로 대체하면 효과가 있습니다.

중"webpack": "^5.41.1"npm i -S webpack@latest을 사용하다

같은 문제가 발생하여 최신 npm 버전을 설치하여 해결했습니다.

npm install -g npm@latest

나서 그를 .webpack.config.js 파일

- configuration . recisions . extensions [ 0 ]는 비워둘 수 없습니다.

resolve extension은 다음과 같습니다.

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

다음 " " " 를 실행합니다.npm start.

npm init으로 작성한 프로젝트에 webpack을 도입했을 때 같은 에러 메시지가 표시되었습니다.

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

웹 팩과 바벨을 사용한 리액트 환경 설정 링크가 도움이 되었습니다.

나는 변해야 했다.

cheap-module-eval-source-map

대상:

eval-cheap-module-source-map

v4에서 v5의 뉘앙스

같은 문제가 발생하여 web.config.js 파일을 변경하여 이 문제를 해결했습니다.참고로 저는 최신 버전의 webpack과 webpack-cli를 사용하고 있습니다.이 속임수로 목숨을 건졌다.버전 전후에 mine 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/ }
        ]
    }
}

After: 코드 스니펫에서 볼 수 있듯이 모듈 객체의 규칙에 로더를 교체했습니다.

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

이것이 누군가가 이 문제를 해결하는 데 도움이 되기를 바랍니다.

로더를 의 규칙으로 변경했습니다.webpack.config.js패키지를 파일화하여 갱신하다html-webpack-plugin,webpack,webpack-cli,webpack-dev-server★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★!

나도 너와 같은 실수를 하고 있어.

npm uninstall webpack --save-dev

&

npm install webpack@2.1.0-1802.22 --save-dev

해결하세요!

path.path()는 entry를 output으로 합니다. entry: path.resolve(__dirname + '/app.jsx') 해봐.entry: __dirname + '/app.jsx'

제 경우, 문제는 프로젝트가 포함된 폴더의 이름이었습니다.그 폴더에는 "!"라는 기호가 붙어 있었고, 폴더 이름을 바꾸기만 하면 모든 것이 준비되었습니다.

나도 같은 문제가 있었어 내 경우엔 좋은 일만 하면 됐거든

오류 메시지 읽기...

오류 메시지에는 다음과 같이 표시됩니다.

잘못된 구성 개체입니다.웹 팩이 API 스키마와 일치하지 않는 구성 개체를 사용하여 초기화되었습니다. - configuration.entry는 다음 중 하나여야 합니다. 함수 | 객체 { : non - non - empty string | [ non - empty string ] | [ non - empty string ] -> 컴파일의 엔트리 포인트입니다.상세: * configuration.entry는 함수의 인스턴스여야 합니다.-> 엔트리 오브젝트, 엔트리 문자열, 엔트리 배열 또는 이들 항목에 대한 약속을 반환하는 함수입니다.* configuration . entry [ ' styles ' ]는 문자열이어야 합니다.-> 이 문자열은 부팅 시 로드되는 모듈로 해결됩니다.* configuration . entry [ ' styles ' ]에는 항목 'C:\MojiFajlovi\Faks \ 11 Master \ 1 Semestar \UDD-Upravljanje Digitalnim Dokumentima \Projekat\nc-front\node_modules\bootstrap\dist\css\bootstrap.min.css'를 두 번 누릅니다.

메시지 행에서 알 수 있듯이 .angular.json하여 ""를 .styles다음과 같이 됩니다.

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

...그래서 나는 그냥 표시된 선을 제거했다...

모든 게 잘 풀렸어요:)

다른 구문(플래그...)을 사용하면 웹 팩(3,4,5...)에서 버전 간에 이 문제가 발생할 수 있습니다.새로 갱신된 웹 팩 설정 및 권장되지 않는 기능을 읽어야 합니다.

다소 가능성이 희박한 상황입니다.

삭삭 the the the 를 했습니다.yarn.lock이전 버전의 웹 팩을 참조하는 파일입니다.

'어느 정도인지', '어느 정도인지', '어느 정도인지'의 를 확인해 .yarn.lock가능성이 있다고 생각합니다.

해 주세요.source_path.webpacker.yml로 지정합니다.다른 프로젝트에서 webpacker.yml을 복사한 프로젝트에서도 같은 오류가 발생했습니다. directorypacks가 되어 있는 .

제 경우 webpack.js를 다른 프로젝트에서 복사하여 새로운 프로젝트 구조에 맞게 "entry" 경로와 "output" 경로를 변경하지 않은 것이 원인입니다.일단 길을 고치고 나면 모든 것이 다시 작동했다.

webpack 버전3을 사용하고 있기 때문에, 현재의 https://www.npmjs.com/package/webpack-dev-server 의 「버전」페이지에 따라서 webpack-dev-server 버전 2.11.5 를 인스톨 했습니다.그리고 문제는 사라졌습니다.

단일 SPA 월드에서 이 오류가 발생한 경우.어플리케이션에 서비스를 제공하기 위한 스크립트가 원인이라는 것을 알았습니다.

예를 들어 다음과 같습니다.

"scripts": {
    "start": "ng serve",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

이 작업을 수행하려면 시작 스크립트를 다음 스크립트로 변경합니다.

"scripts": {
    "start": "npm run serve:single-spa:play",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

이 작품을 써보세요, 중요한 건, 규칙은 목록이나 배열이어야 한다는 겁니다.

module:{
    rules:[
        {
            test:/\.js$/,
            exclude: /node_modules/,
            use:{
                loader:'babel-loader'
            },
        }
    ]
}

11에서 12로 앵글버전을 이행하고 싱글스파를 사용한 후에 이 에러가 발생합니다.

그 후, 이하의 패키지에 대해서 「syslog.json」을 설정할 수 있습니다.

"single-spa": "^5.9.3"

"single-spa-angular": "^5.0.2"

@angular-builders/custom-webpack": "^12.1.3"

"webpack": "^5.70.0"

후에npm install

이 문제는 WebPack5를 Cypress 및 Ooy와 함께 사용하려고 하다가 발생하였습니다(이 예에서는 https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example)을 기반으로 합니다).plugin\index.js를 이것으로 변경한 것은 나에게 효과가 있었습니다!

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', cucumber(options));
  on('task', {
    log(message) {
      console.log(message)

      return null
    },
  })
};

npm 을 인스톨 하면, 다음의 명령어를 사용합니다.

npm install webpack

Web Pack 이 글로벌하게 인스톨 되어 있지 않은 경우는, 다음의 커맨드를 사용해 인스톨 합니다.

npm install webpack -g

언급URL : https://stackoverflow.com/questions/42060243/invalid-configuration-object-webpack-has-been-initialised-using-a-configuration