잘못된 구성 개체입니다.

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

---

온라인 코스에서 만든이 간단한 helloworld 반응 앱이 오류가 발생합니다.

잘못된 구성 개체입니다. API 스키마와 일치하지 않는 구성 개체를 사용하여 Webpack이 초기화했습니다. -구성에 알 수없는 속성 'postcss'가 있습니다. 다음 속성은 유효합니다. object {amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance? , plugins?, profile?, recordsInputPath?, recordsO utputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } 오타의 경우 : 수정하십시오.
로더 옵션의 경우 : webpack 2는 더 이상 구성에서 사용자 지정 속성을 허용하지 않습니다. module.rules의 로더 옵션을 통해 옵션을 쉽게 사용할 수있는 로더를 업데이트해야합니다.로더가 업데이트 될 때까지 LoaderOptionsPlugin을 사용하여 다음 옵션을 로더에 사용할 수 있습니다. plugins : [new webpack.LoaderOptionsPlugin ({// test : /.xxx$/, // 일부 모듈 옵션에만 적용 할 수 있습니다. {postcss : ...}})]-configuration.resolve에 알 수없는 속성 ' root '가 있습니다. 다음과 같은 속성이 유효합니다. ?, unsafeCache?, useSyncFileSystemCalls? } -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-dev-server는 전역 설치되어야합니다.
webpack을 사용하여 수 없음과 같은 일부 서버 오류를 안내 링크 명령을 사용하여 Webpack을 연결했습니다.
출력에서 일부 절대 경로 문제 해결.

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

---

해결 배열에서 빈 제거를 제거 하여이 문제를 해결했습니다. webpack의 사이트 에서 해결 문서를 확인하십시오 .

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

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

---

"webpack.config.js"에서 "로더"에서 "규칙"으로 변경하십시오.

로더는 Webpack 1에서 사용되는 규칙은 Webpack2에서 사용되기 때문입니다. 차이점 이 있음을 알 수 있습니다 .

---

아래 단계를 시도하십시오.

npm uninstall webpack --save-dev

에너

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

그럼 다시 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 거리는 것 나를 위해 문제를 해결했습니다.

---

귀하의 웹팩 버전은 2.2.1입니다. 이 마이그레이션 가이드-> https://webpack.js.org/guides/migrating/ 을 생각합니다.

또한이 TypeSCript + Webpack 2 예제를 사용할 수 있습니다 .

---

최근에 시작된 자신과 같은 사람들의 경우 : loaders키워드가되어 교체 와 rules; 여전히 로더의 개념을 나타냅니다. 그래서 React 앱의 경우 다음과 가변합니다 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;

---

"로더"를 "규칙"으로 변경하면 효과가 (webpack v4).

---

webpack.config.js에서 로더 : [..]를 규칙 : [..]으로 바꿉니다.

---

나는 같은 문제가 있지만 최신 npm 버전을 설치하여 해결했습니다.

npm install -g npm@latest

그런 다음 webpack.config.js파일을 변경하십시오.

-configuration.resolve.extensions [0]은 비워 둘 수 없습니다.

이제 해결 확장은 다음과 같아야합니다.

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

그런 다음 npm start.

---

Webpack의 구성 파일은 수년에 걸쳐 변경되었습니다 (각 주요 릴리스에서 가능). 질문에 대한 답 :

이 오류가 발생하는 이유

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

구성 파일이 사용중인 웹팩 버전과 일치하지 않기 때문입니다.

받아 들여진 대답은 이것을 언급하지 않고 다른 대답은 이것에 대해 암시하지만 명확하게 명시하지는 않습니다. npm install webpack@2.1.0-beta.22 , " webpack.config.js 에서"loaders "에서"rules "로 변경하십시오. " , 그리고이 . 그래서 저는이 질문에 대한 제 답변을 제공하기로 결정했습니다.

웹팩을 제거하고 다시 설치하거나 웹팩의 글로벌 버전을 사용해도이 문제가 해결되지 않습니다. 사용중인 구성 파일에 올바른 버전의 웹팩을 사용하는 것이 중요합니다.

당신의 글로벌 버전은 "오래된"이라고 글로벌 버전이 가능성이 수단을 사용하는 경우이 문제가 해결되었고 당신 때문에 "오래된"입니다 사용하여 파일 형식 webpack.config.js 경우 가 일치 와 비올라 지금 일을 일을 . 나는 모든 것이 잘 작동하지만 독자들이 왜 작동했는지 알기를 바랍니다.

문제를 해결할 수있는 웹팩 구성을 얻을 때마다 ... 구성이 어떤 버전의 웹팩인지 자문 해보십시오.

웹팩 학습을위한 좋은 리소스가 많이 있습니다. 일부는 다음과 같습니다.

• 공식 웹팩 웹 사이트 현재 버전 4.x에서의 웹팩 구성을 설명 . 이것은 웹팩의 작동 방식을 찾는 데 유용한 리소스이지만 문제를 해결하기 위해 웹팩의 2 개 또는 3 개 옵션이 함께 작동하는 방법을 배우는 데 항상 최고는 아닙니다. 그러나 사용중인 웹팩의 버전을 알아야하기 때문에 시작하기에 가장 좋은 곳입니다. :-)

• 예제 별 Webpack (v3?) -웹팩을 학습하고 문제를 선택한 다음 웹팩에서 해결하는 방법을 보여주기 위해 간단한 접근 방식을 취합니다. 나는이 접근 방식을 좋아합니다. 불행히도 webpack 4를 가르치지는 않지만 여전히 좋습니다.

• Webpack4, Babel 및 React를 처음부터 설정, 재검토 -이것은 React에만 해당되지만 React 단일 페이지 앱을 만드는 데 필요한 많은 것을 배우려는 경우 유용합니다.

• Webpack (v3) — 혼동되는 부분 - 훌륭하고 많은 부분을 다룹니다. 2016 년 4 월 10 일자이며 webpack4를 다루지 않지만 많은 교육 포인트가 유효하거나 배우는 데 유용합니다.

예를 들어 webpack4를 배우는 데 더 많은 좋은 리소스가 있습니다. 다른 사람을 알고 있다면 댓글을 추가하세요. 바라건대, 향후 웹팩 기사에서 사용 / 설명중인 버전을 설명 할 것입니다.

---

rules대신 사용하여 나를 위해 작동합니다.loaders

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

}

---

이 오류는 일반적으로 충돌하는 버전 (각도 js)이있을 때 발생합니다. 따라서 웹팩은 애플리케이션을 시작할 수 없습니다. 웹팩을 제거하고 다시 설치하여 간단히 수정할 수 있습니다.

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

응용 프로그램을 다시 시작하면 모든 것이 정상입니다.

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

---

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

다음 링크가 도움이된다는 것을 알았습니다. 웹팩과 Babel을 사용하여 React 환경 설정

---

나는 변경 로더 에 규칙 에서 webpack.config.js파일과 패키지 업데이트 html-webpack-plugin, webpack, webpack-cli, webpack-dev-server그것은 나를 위해 일한 후 최신 버전으로!

---

이 오류는 'entry'및 'output'설정을 지정하기 위해 path.resolve ()를 사용할 때 발생합니다. entry: path.resolve(__dirname + '/app.jsx'). 단지 시도entry: __dirname + '/app.jsx'

---

나는 당신과 같은 오류가 있습니다.

npm 웹팩 제거 --save-dev

&

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

해결해!.

---

제 경우 문제는 "!"기호가있는 프로젝트가 포함 된 폴더의 이름이었습니다. 내가 한 것은 폴더 이름을 바꾸는 것이었고 모든 것이 준비되었습니다.

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