Webpack Loader 만들기

webpack에서 파일을 번들링 할때 사용되는 loader를 직접 만들어보자!

webpack 공식문서의 번역 수준입니다.

loader 만들기

로더는 함수를 내보내는 node module입니다. 이 함수는이 loader가 리소스 내용을 변형해야 할 때 호출됩니다. 지정된 함수는 제공된 컨텍스트를 사용하여 로더 API에 액세스 할 수 있습니다.

setup

사용법 및 예제를 살펴보기 전에 로더를 로컬에서 개발하고 테스트 할 수 있는 세 가지 방법을 살펴 보겠습니다.
단일 로더를 테스트하려면 경로를 사용하여 규칙 객체 내의 로컬 파일을 해결하면됩니다.

{
  test: /\.js$/
  use: [
    {
      loader: path.resolve('path/to/loader.js'),
      options: {/* ... */}
    }
  ]
}

여러개를 테스트하려면 resolveLoader.modules 구성을 사용하여 webpack이 로더를 검색 할 위치를 업데이트 할 수 있습니다.

프로젝트에 로컬 / 로더 디렉토리가있는 경우 :

resolveLoader: {
  modules: [
    'node_modules',
    path.resolve(__dirname, 'loaders')
  ]
}

마지막으로, 로더 용으로 별도의 저장소와 패키지를 이미 만든 경우에는 테스트 할 프로젝트에 npm 링크 할 수 있습니다. npm link

간단히 사용해보기

단일 로더가 리소스에 적용되면 로더는 리소스 파일의 내용을 포함하는 문자열 인 하나의 매개 변수만 사용하여 호출됩니다.

동기

동기 로더(Synchronous loaders)는 변환 된 모듈을 나타내는 단일 값을 반환(return) 할 수 있습니다. 보다 복잡한 경우 로더는 this.callback (err, values ...) 함수를 사용하여 원하는 수의 값을 반환 할 수 있습니다. 오류는 this.callback 함수로 전달되거나 동기화 로더에서 발생합니다.

로더는 하나 또는 두 개의 값을 돌려 줄 것으로 예상됩니다. 첫 번째 값은 문자열 또는 버퍼로 결과 JavaScript 코드입니다. 두 번째 옵션 값은 JavaScript 객체 인 SourceMap입니다.

// return 방식 로더
module.exports = function(content, map, meta) {
  return someSyncOperation(content);
};

// 콜백 방식 로더
module.exports = function(content, map, meta) {
  this.callback(null, someSyncOperation(content), map, meta);
  return; // always return undefined when calling callback()
};

비동기

For asynchronous loaders, this.async is used to retrieve the callback function
비동기식 로더의 경우 this.async가 콜백 함수를 가져오는 데 사용됩니다.

// 비동기 로더
module.exports = function(content, map, meta) {
  var callback = this.async();
  someAsyncOperation(content, function(err, result) {
    if (err) return callback(err);
    callback(null, result, map, meta);
  });
};

// 여러 결과를 반환하는 비동기 로더
module.exports = function(content, map, meta) {
  var callback = this.async();
  someAsyncOperation(content, function(err, result, sourceMaps, meta) {
    if (err) return callback(err);
    callback(null, result, sourceMaps, meta);
  });
};

여러 로더가 연결될 때, 배열 형식에 따라 오른쪽에서 왼쪽으로 또는 맨 아래에서 맨 위로 역순으로 실행된다는 점을 기억하는 것이 중요합니다.

• 첫번째로 호출되는 마지막 로더는 원시 리소스의 내용을 전달합니다.
• 마지막에 호출되는 첫 번째 로더는 JavaScript와 선택적으로 소스 맵을 반환해야합니다.
• 그 사이에있는 로더는 체인에있는 이전 로더의 결과로 실행됩니다.

다음 예제에서 foo-loader는 원시 리소스를 전달하고 bar-loader는 foo-loader의 출력을 받고 필요한 경우 최종 변환 모듈과 소스 맵을 반환합니다.

webpack.config.js

{
  test: /\.js/,
  use: [
    'bar-loader',
    'foo-loader'
  ]
}

Guidelines

로더 작성시 다음 지침을 따라야합니다. 그것들은 중요성의 관점에서 주문되며 일부는 특정 시나리오에만 적용됩니다. 자세한 내용은 다음에 나오는 세부 절을 읽으십시오.

• 모듈을 간단하게 유지하십시오.
• chaining을 활용하십시오.
• modular 출력 내보네세요.
• stateless인지 확인하십시오.
• 로더 유틸리티(loader utilities)를 사용하십시오.
• 로더 종속성을 표시하십시오.
• 모듈 종속성을 해결하십시오.
• 공통 코드를 추출합니다.
• 절대 경로를 피하십시오.
• 피어 종속성을 사용하십시오.

Simple