웹팩 소스코드의 로더 메커니즘에 대한 자세한 설명

이 글은 주로 웹팩 소스코드의 로더 메커니즘에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.

Loader 개념

Loader는 다양한 형태의 리소스를 로드하고 처리하는 데 사용됩니다. 기본적으로 파일을 매개변수로 받아들이고 변환된 구조를 반환하는 함수입니다.

loader는 모듈의 소스 코드를 변환하는 데 사용됩니다. 로더를 사용하면 모듈을 가져오거나 "로드"할 때 파일을 전처리할 수 있습니다. 따라서 로더는 다른 빌드 도구의 "작업"과 유사하며 프런트 엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다. 로더는 다른 언어(예: TypeScript)의 파일을 JavaScript로 변환하거나 인라인 이미지를 데이터 URL로 변환할 수 있습니다. 로더를 사용하면 JavaScript 모듈에서 CSS 파일을 직접 가져올 수도 있습니다!

로더와 플러그인의 차이점

플러그인 메커니즘은 이전 글에서 소개했는데, 오늘 공부의 대상인 로더가 함께 웹팩의 기능을 크게 확장시켜주었습니다. 차이점은 로더는 모듈의 소스 코드를 변환하는 데 사용되는 반면, 플러그인의 목적은 로더가 달성할 수 없는 다른 문제를 해결하는 것입니다. 플러그인은 어느 단계에서나 호출될 수 있기 때문에 로더 전반에 걸쳐 로더의 출력을 추가로 처리하고, 빌드 실행 중에 이벤트를 트리거하고, 사전 등록된 콜백을 실행하고, 컴파일 개체를 사용하여 다음 작업을 수행할 수 있습니다. 몇 가지 낮은 수준의 것들.

로더 사용법

configuration

module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     { loader: 'style-loader' },
     {
      loader: 'css-loader'
     }
    ]
   }
  ]
 }

inline

import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI

webpack --module-bind 'css=style-loader!css-loader'

위 3가지 사용법이 모두 익숙하다고 설명해주세요 체인으로 연결된 로더는 오른쪽에서 왼쪽으로 순서대로 실행됩니다. 로더 체인의 첫 번째 로더는 다음 로더에 값을 반환합니다. 먼저 css-loader를 사용하여 @import 및 url() 경로에 지정된 CSS 콘텐츠를 구문 분석한 다음 style-loader를 사용하여 원본 CSS 코드를 페이지의 스타일 태그에 삽입합니다.

로더 구현

//将css插入到head标签内部
module.exports = function (source) {
  let script = (`
   let style = document.createElement("style");
   style.innerText = ${JSON.stringify(source)};
   document.head.appendChild(style);
  `);
  return script;
}
//使用方式1
resolveLoader: {
  modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
  test: /\.css$/,
  use: ['style-loader']
},
//使用方式2
//将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可

설명 위는 간단한 로더 구현으로, 동기식으로 실행되며, 이는 스타일 로더의 기능을 구현하는 것과 같습니다.

로더 원리

function iteratePitchingLoaders(options, loaderContext, callback) {
  var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
  // load loader module
  loadLoader(currentLoaderObject, function(err) {
    var fn = currentLoaderObject.pitch;
    runSyncOrAsync(
      fn,
      loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
      function(err) {
        if(err) return callback(err);
        var args = Array.prototype.slice.call(arguments, 1);
        if(args.length > 0) {
          loaderContext.loaderIndex--;
          iterateNormalLoaders(options, loaderContext, args, callback);
        } else {
          iteratePitchingLoaders(options, loaderContext, callback);
        }
      }
    );
  });
}

설명 위는 웹팩 소스 코드에서 로더 실행의 주요 단계입니다. 로더의 실행 프로세스는 Express 미들웨어 메커니즘과 유사합니다

모든 사람을 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Jquery의 구체적인 예는 AJAX를 사용해야 하는 시기와 AJAX를 사용해야 하는 위치를 소개합니다.

js 로드 시 ajax 진행률 바코드

Ajax 도메인 간 문제에 대한 두 가지 솔루션 방법

위 내용은 웹팩 소스코드의 로더 메커니즘에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!