[reactjs] 잘못된 구성 개체입니다. 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'
            }
        }
    }

};