configuration.module에 알 수없는 'loaders'속성이 있습니다.


136

내 오류 출력 :

잘못된 구성 개체입니다. API 스키마와 일치하지 않는 구성 오브젝트를 사용하여 웹팩이 초기화되었습니다. -configuration.module에 알 수없는 'loaders'속성이 있습니다. 객체 {exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, unknownContextCritical ?, unknownContextRecursive ?, unknownContextRegExp ?, unknownContextRequest ?, unsafeCache ?, wrappedContextCritical ?, wrappedContextRecursive ?, wrappedContextRecursive? ?, strictExportPresence ?, strictThisContextOnImports? }-> 일반 모듈에 영향을주는 옵션 ( NormalModuleFactory).

내 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',
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }

};


module.exports = config;

내 웹팩 버전 :

webpack@4.1.1

답변:


317

당신은 변경해야합니다 loadersrules웹팩 4 :

변화:

loaders 

에:

rules

소스 : 로더

예:

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

1
오타입니까? rules웹팩 4에 있어야합니다 .
Sin

웹팩 4에서 규칙을 사용해야합니다.
S.M_Emamian

2
이 필요한 경우 웹팩 4의 규칙을 변경 로더 ... 다시 말했다 수 : /
헬무트 란다

1
귀하의 답변에 변경 이유가 webpack 4임을 설명해야합니다.
kojow7


2

위의 답변이 작동하지만 webpack 및 webpack-dev-server 버전을 다음과 같이 변경 하여이 문제를 해결할 수 있습니다

"webpack": "3.8.1",
"webpack-dev-server": "2.9.4"

문제를 해결할 수도 있습니다. 그것이 도움이되기를 바랍니다.


나는 당신에게 업틱을 주었다. 유일한 문제는 사람들이 구성 파일을 변경할 필요가 없도록하기 위해 이전 버전으로 돌아 가지 않고 새로운 기능을 얻기 위해 프레임 워크 및 도구 버전을 업그레이드하려고한다는 것입니다. 아마도 도구가 작동하는 새로운 방식에 맞게 구성 파일을 변경하는 데 어려움을 겪는 것은 나쁘지 않습니다. 불가능하지 않으면
Eniola

감사합니다 @Eniola, 네 맞습니다. 내가 언급했듯이 S.M_Emamian 답변은 정확하지만 누군가가 이전 버전의 웹 팩으로 작업하기로 동의하면 내 답변이 작동합니다.
Anshul


0

webpack.config.js 아래에서 나를 위해 일하기

module.exports = {
    entry: [
        '.src/index.js'
    ],
    output:{
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module:{
        rules: [
          { test: /\.css$/, use: 'css-loader' },
          { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.