Webpack은 Loader를 어떻게 구현합니까? (코드 포함)

이 글의 내용은 Webpack이 Loader를 구현하는 방법에 관한 것입니다. (코드 첨부) 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

로더를 구현하는 방법은 무엇입니까?

이전 섹션에서 로더에 대해 이야기했습니다. 오늘은 로더를 깊이 있게 이해하겠습니다. 가장 폭력적인 방법은 직접 구현하는 것입니다.

자, 주제로 돌아가서 먼저 로더 정의를 살펴보겠습니다. 모듈 소스 코드가 변환됩니다. 로더를 사용하면 모듈을 가져오거나 "로딩"할 때 파일을 전처리할 수 있습니다

사용하기 쉽습니다

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            // loader 是导出为一个a函数的 node 模块。该函数在 loader 转换资源的时候调用
            // 给定的函数将调用 loader API，并通过 this 上下文访问
            loader: path.resolve('loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

로더의 정의와 간단한 사용법을 검토한 후 로더 구현 아이디어를 분석해 보겠습니다

단일 책임, 하나의 로더는 한 가지 작업만 수행합니다. Things

체인 조합, 체인의 각 로더는 처리된 리소스에 변환을 적용합니다

모듈화, 함수로 내보낸 노드 모듈입니다.

매개변수 병합, 로더는 옵션 개체를 통해 구성할 수 있습니다

위 내용을 기반으로 분석부터 시작해 보겠습니다.

// 这个就是一个最简单loader，
// 如果我们的loader有依赖其它模块，也得以module的写法将在在顶部引入
import fs from 'fs';
export default function(source){
    return source
}

return이 동기화 클래스의 로더이고 반환된 콘텐츠가 고유하기 때문에 바로 위에서 사용되는 것을 확인했습니다. 로더가 체인 호출을 지원하도록 하려면 결과를 다음 로더에 반환하세요. 계속 사용하려면 webpack에서 제공하는 API를 사용해야 합니다. 여기서는 동기식 또는 비동기식으로 호출할 수 있고 여러 결과를 반환할 수 있는 함수인 this.callback의 정의를 간략하게 살펴보겠습니다. 예상되는 매개변수는

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
)

// loader-utils 它提供了很多有用的工具
// 最常用的一个就是获取传入 loader 的 options
import { getOptions } from 'loader-utils';
export default function(source, other) {
  const options = getOptions(this)    
  // do whatever you want
  // ...
  this.callback(null, source, other)
}

로더를 직접 작성하는 것이 공부하지 않은 사람들에게는 다소 어렵게 들릴 수 있습니다. 실제로 위에서 소개한 내용과 아이디어를 익히고 나면 간단한 로더 작성을 다시 시작해 보겠습니다. . 로더란 정확히 무엇인가요?

// 首先loader它是一个node模块，这很好理解
export const lessToCss = function(source, other) {
    // source 就是你即将要转换的文件源
    // TODO
    // 将转换好的文件源流转至一个管道
    this.callback(null, source, other)
}

로더를 더 유용하게 만드세요

로더 API에는 몇 가지 유용한 기능이 있습니다. 여기에 몇 가지 유용한 기능이 있습니다.

this.cacheable() 실행 효율성을 높이는 관점에서 캐시 사용 처리 매우 중요합니다. webpack의 This.cacheable은 로더를 쉽게 캐시할 수 있습니다

this.async() 로더에 종속성이 없으면 결과를 비동기적으로 반환해야 합니다

사례 분석

붙여넣기 아래에 적습니다 - 로더의 소스 코드는 코드가 매우 간결하고 위에서 분석한 내용을 바탕으로 이해하기 쉽습니다

import processResult from './processResult';
const render = pify(less.render.bind(less));

function lessLoader(source) {
  const loaderContext = this;
  const options = getOptions(loaderContext);
  const done = loaderContext.async();
  const isSync = typeof done !== 'function';

  if (isSync) {
    throw new Error(
      'Synchronous compilation is not supported anymore. See https://github.com/webpack-contrib/less-loader/issues/84'
    );
  }
  processResult(loaderContext, render(source, options));
}

요약

로더는 노드 모듈입니다

로더를 작성할 때 한 가지 원칙을 따라야 합니다. 각 로더는 한 번의 "이스케이프"만 수행합니다. "Work

webpack은 풍부한 로더 api를 제공합니다.

webpack은 또한 일련의 도구 기능도 제공합니다 - loader-utils

[관련 권장 사항:

JavaScript 비디오 튜토리얼

]

위 내용은 Webpack은 Loader를 어떻게 구현합니까? (코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!