ag-grid is proud to partner with webpack

Other Options

webpack에서 지원하는 나머지 설정 옵션들이 있습니다.

amd

object boolean: false

require.amd 또는 define.amd의 값을 설정합니다. amd를 false로 설정하면 webpack AMD 지원이 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  amd: {
    jQuery: true,
  },
};

jQuery 1.7.0 ~ 1.9.1 같이 AMD로 작성된 특정 인기 모듈은 로더가 페이지에 포함되는 여러 버전에 대해 특별한 허용을 받았다고 표시하는 경우에만 AMD 모듈로 등록됩니다.

허용되는 기능은 등록을 특정 버전으로 제한하거나 정의된 모듈이 다른 다양한 샌드박스를 지원하는 기능이었습니다.

이 옵션을 사용하면 모듈이 찾는 키를 정확한 값으로 설정할 수 있습니다. 이 경우 webpack의 AMD 지원은 정의된 이름을 무시합니다.

bail

boolean = false

넘어가지 않고 첫 번째 오류에서 실패합니다. 기본적으로 webpack은 HMR을 사용할 때 브라우저 콘솔뿐만 아니라 터미널에 이러한 오류를 빨간색으로 기록하지만 번들링을 계속합니다. 아래와 같이 활성화합니다.

webpack.config.js

module.exports = {
  //...
  bail: true,
};

이렇게 하면 webpack은 번들링 프로세스를 종료합니다.

dependencies

[string]

의존하는 모든 형제 설정을 정의하는 name 목록입니다. 먼저 의존하는 설정을 컴파일해야 합니다.

감시 모드에서 디펜던시는 다음과 같은 경우 컴파일러를 무효화합니다.

디펜던시가 변경된 경우
디펜던시가 현재 컴파일 중이거나 유효하지 않은 경우

현재 설정은 의존하는 디펜던시가 완료될 때까지 컴파일되지 않습니다.

webpack.config.js

module.exports = [
  {
    name: 'client',
    target: 'web',
    // …
  },
  {
    name: 'server',
    target: 'node',
    dependencies: ['client'],
  },
];

ignoreWarnings

[RegExp, function (WebpackError, Compilation) => boolean, {module?: RegExp, file?: RegExp, message?: RegExp}]

특정 경고를 무시하도록 webpack에 지시합니다. 이것은 WebpackError 및 Compilation을 인수로 받고 boolean를 반환하는 원시 경고 인스턴스를 기반으로 경고를 선택하는 커스텀 function, RegExp 그리고 아래의 프로퍼티를 가지는 object가 될 수 있습니다.

file : 경고에 대한 원본 파일을 선택하는 RegExp입니다.
message : 경고 메시지를 선택하는 RegExp입니다.
module : 경고에 대한 원본 모듈을 선택하는 RegExp입니다.

ignoreWarnings은 위의 항목 일부 또는 전체를 갖는 배열이어야 합니다.

module.exports = {
  //...
  ignoreWarnings: [
    {
      module: /module2\.js\?[34]/, // A RegExp
    },
    {
      module: /[13]/,
      message: /homepage/,
    },
    /warning from compiler/,
    (warning) => true,
  ],
};

infrastructureLogging

인프라 레벨의 로깅 옵션입니다.

object = {}

appendOnly

5.31.0+

boolean

기존 출력을 업데이트하는 대신 출력에 행을 추가합니다. 상태 메시지에 유용합니다. 이 옵션은 커스텀 console이 제공되지 않은 경우에만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    appendOnly: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.status('first output'); // `appendOnly`가 활성화된 상태에서는 재정의되지 않습니다.
      logger.status('second output');
    },
  ],
};

colors

5.31.0+

boolean

인프라 레벨의 로깅을 위해 다채로운 출력을 활성화합니다. 이 옵션은 커스텀 [console]#console)이 제공되지 않은 경우에만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    colors: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.log('this output will be colorful');
    },
  ],
};

console

5.31.0+

Console

인프라 레벨의 로깅에 사용되는 콘솔을 커스터마이즈 합니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    console: yourCustomConsole(),
  },
};

debug

string boolean = false RegExp function(name) => boolean [string, RegExp, function(name) => boolean]

플러그인 또는 로더와 같은 지정된 로거의 디버그 정보를 활성화합니다. stats.loggingDebug 옵션과 유사하지만 인프라 용입니다. 기본값은 false입니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
    debug: ['MyPlugin', /MyPlugin/, (name) => name.contains('MyPlugin')],
  },
};

level

인프라 로깅 출력을 활성화합니다. stats.logging 옵션과 유사하지만 인프라 용입니다. 기본값은 'info' 입니다.

Possible values:

'none' - 로깅을 비활성화
'error' - 에러
'warn' - 에러와 경고
'info' - 에러, 경고 및 정보 메시지
'log' - 에러, 경고, 정보 메시지, 로그 메시지, 그룹, 삭제. 접힌 그룹은 접힌 상태로 표시됩니다.
'verbose' - 디버그 및 추적을 제외한 모든 것을 기록합니다. 접힌 그룹은 펼쳐진 상태로 표시됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
  },
};

stream

5.31.0+

NodeJS.WritableStream = process.stderr

출력 로깅에 사용되는 스트림입니다. 기본값은 process.stderr입니다. 이 옵션은 커스텀 console이 제공되지 않은 경우에만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    stream: process.stderr,
  },
};

loader

object

사용자 정의 값을 loader context에 노출합니다.

예를들면, loader context에 새 변수를 정의할 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  loader: {
    answer: 42,
  },
};

그런 다음 로더에서 이 값을 가져오기 위해 this.answer를 사용하세요.

custom-loader.js

module.exports = function (source) {
  // ...
  console.log(this.answer); // `42`를 기록합니다.
  return source;
};

name

string

설정의 이름입니다. 여러 설정을 로드할 때 사용됩니다.

webpack.config.js

module.exports = {
  //...
  name: 'admin-app',
};

parallelism

number = 100

병렬 처리되는 모듈의 수를 제한하세요. 성능을 미세하게 조정하거나 보다 안정적인 프로파일링 결과를 얻는 경우 사용할 수 있습니다.

profile

boolean

통계 및 힌트를 포함하여 애플리케이션의 "프로필"을 캡처 한 다음 분석 도구를 사용하여 분석 할 수 있습니다. 또한 모듈 타이밍에 대한 요약도 기록합니다.

recordsInputPath

string

마지막 레코드 세트를 읽을 파일을 지정하세요. 레코드 파일의 이름을 바꾸는 데 사용할 수 있습니다. 아래 예제를 참고하세요.

recordsOutputPath

string

레코드를 작성해야하는 위치를 지정하세요. 다음 예제는 이 옵션을 recordsInputPath와 함께 사용하여 레코드 파일의 이름을 바꾸는 방법을 보여줍니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsInputPath: path.join(__dirname, 'records.json'),
  recordsOutputPath: path.join(__dirname, 'newRecords.json'),
};

recordsPath

string

이 옵션을 사용하여 여러 빌드에서 모듈 식별자를 저장하는 경우 사용되는 데이터 조각인 webpack "레코드"를 포함하는 JSON 파일을 생성합니다. 이 파일을 사용하여 빌드간에 모듈이 변경되는 방식을 추적할 수 있습니다. 생성하려면 위치를 지정하기 만하면 됩니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsPath: path.join(__dirname, 'records.json'),
};

레코드는 코드 스플리팅을 활용하는 복잡한 설정이 있는 경우 특히 유용합니다. 분할된 번들이 필요한 캐싱 동작을 달성하는지 확인할 수 있습니다.

snapshot

object

snapshot 옵션은 파일 시스템 스냅샷을 만들고 무효화하는 방법을 결정합니다.

webpack.config.js

const path = require('path');
module.exports = {
  // ...
  snapshot: {
    managedPaths: [path.resolve(__dirname, '../node_modules')],
    immutablePaths: [],
    buildDependencies: {
      hash: true,
      timestamp: true,
    },
    module: {
      timestamp: true,
    },
    resolve: {
      timestamp: true,
    },
    resolveBuildDependencies: {
      hash: true,
      timestamp: true,
    },
  },
};

buildDependencies

object = { hash boolean = true, timestamp boolean = true }

영구 캐시를 사용할 때 빌드 디펜던시에 대한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

hash와 timestamp 모두 선택사항입니다.

{ hash: true }: 타임 스탬프를 유지하지 않고 해시를 사용하는 새로운 체크 아웃으로 CI 캐싱에 적합합니다.
{ timestamp: true }: 로컬 개발 캐싱에 적합합니다.
{ timestamp: true, hash: true }: 위에서 언급 한 두 경우 모두 좋습니다. 타임 스탬프가 먼저 비교되는데, 이는 webpack이 해시를 계산하기 위해 파일을 읽을 필요가 없기 때문에 비용이 저렴합니다. 콘텐츠 해시는 타임 스탬프가 동일한 경우에만 비교되므로 초기 빌드에서 약간의 성능 저하가 발생합니다.

immutablePaths

(RegExp | string)[]

패키지 관리자가 관리하고 경로에 버전 또는 해시를 포함하여 모든 파일을 변경할 수 없는 경로 배열입니다.

정규식을 사용하는 경우 캡처 그룹의 경로를 래핑해야 합니다.

managedPaths

(RegExp | string)[]

패키지 관리자가 관리하고 수정되지 않도록 신뢰할 수 있는 경로의 배열입니다.

정규식을 사용하는 경우 webpack이 경로를 추출할 수 있도록 캡처 그룹의 경로를 래핑해야 합니다. 예를 들어 여기에 node_modules 디렉터리와 일치시키기 위해 webpack 내부적으로 사용하는 RegExp가 있습니다.

/^(.+?[\\/]node_modules)[\\/]/

managedPaths의 일반적인 사용 사례는 node_modules에서 일부 폴더를 제외하는 것입니다. 예를 들어, node_modules/@azure/msal-browser 폴더의 파일이 변경될 것으로 예상된다는 것을 webpack에 알리고자 합니다. 이는 아래와 같은 정규식으로 수행할 수 있습니다.

module.exports = {
  snapshot: {
    managedPaths: [
      /^(.+?[\\/]node_modules[\\/](?!(@azure[\\/]msal-browser))(@.+?[\\/])?.+?)[\\/]/,
    ],
  },
};

module

object = {hash boolean = true, timestamp boolean = true}

모듈 빌드를 위한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

resolve

object = {hash boolean = true, timestamp boolean = true}

요청 해석을 위한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

resolveBuildDependencies

object = {hash boolean = true, timestamp boolean = true}

영구 캐시를 사용할 때 빌드 디펜던시를 해석하기위한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

15 Contributors

Translators

YukJiSoo

Other Options

amd

bail

dependencies

ignoreWarnings

infrastructureLogging

appendOnly

colors

console

debug

level

stream

loader

name

parallelism

profile

recordsInputPath

recordsOutputPath

recordsPath

snapshot

buildDependencies

immutablePaths

managedPaths

module

resolve

resolveBuildDependencies

Further Reading

15 Contributors

Translators