webpack+loader의 실제 사례에 대한 자세한 설명

이번에는 webpack+loader의 실제 사례에 대해 자세히 설명하겠습니다. webpack+loader의 실제 사용 시 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

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'

위의 세 가지 사용법은 체인으로 연결된 로더 세트를 오른쪽에서 왼쪽으로 순서대로 실행하는 것이라고 설명합니다. 체인은 다음 로더에 값을 반환합니다. 먼저 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 미들웨어 메커니즘과 유사합니다.

이 방법을 마스터했다고 생각합니다. 이 기사의 사례를 읽은 후 PHP 중국어 웹사이트에서 다른 관련 기사도 주목해 주세요!

추천 자료:

Vue+Sortable 프로젝트 실제 코드

페이지 렌더링을 위해 응답 쓰기 저장을 적용하는 방법

위 내용은 webpack+loader의 실제 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!