어떻게 Webpack Loader 의 실현 을 작성 합 니까?

머리말
평소에 0 으로 프로젝트 를 만 들 때 기본 설정 이 익숙 하지만 file-loader,url-loader,css-loader 등 설정 이 어렵 지 않 지만 어떻게 작 동 하 는 지 오늘 은 Webpack Loader 를 만 드 는 방법 을 알려 드 리 겠 습 니 다.
로 더 역할
제 간단 한 이해 에 따 르 면 loader 는 보통 포장 방안 을 말 합 니 다.즉,어떤 방식 으로 포장 을 처리 하 는 지,포장 할 때 모듈 소스 코드 를 받 을 수 있 고 특정한 loader 의 전환 을 거 쳐 새로운 결 과 를 되 돌 릴 수 있 습 니 다.
예 를 들 어 sas-loader 는 SCSS 코드 를 CSS 코드 로 변환 할 수 있다.
작성 로 더
유지 기능 단일
우리 프로젝트 에는 많은 설정 이 있 을 수 있 지만,하나의 Loader 기능 을 단일 하 게 유지 하고 여러 가지 기능 을 하지 않도록 한 가지 기능 전환 만 완성 하면 된다 는 것 을 기억 해 야 합 니 다.
따라서 less 파일 을 css 파일 로 변환 하 는 것 도 한 걸음 에 도착 하 는 것 이 아니 라 less-loader,css-loader,style-loader 몇 개의 loader 의 체인 호출 이 있어 야 변환 이 완 료 됩 니 다.
모듈
Webpack 자체 가 Node.js 위 에서 실행 되 기 때문에 하나의 loader 는 사실은 node 모듈 입 니 다.이 모듈 은 함수 입 니 다.즉,:

module.exports = function (source) {
 // source   compiler     Loader          
 //   ...
 return source //           
}

이 내 보 낸 함수 의 작업 은 처리 전의 원래 내용 을 얻 고 원래 내용 을 처리 한 후 처리 후의 내용 을 되 돌려 주 는 것 입 니 다.
문자열 을 바 꾸 는 loader
예 를 들 어 우리 가 포장 할 때 원본 파일 의 문자열 을 바 꾸 려 면 Loader 를 사용 하 는 것 을 고려 할 수 있 습 니 다.loader 는 원본 파일 의 내용 을 얻 은 다음 에 처리 하고 되 돌려 주기 때 문 입 니 다.
예 를 들 어 src 디 렉 터 리 아래 세 개의 파일 이 있 습 니 다.
src/msg1.js

export const msg1 = '    '

src/msg2.js

export const msg2 = '    JS'

src/index.js

import { msg1 } from './msg1'
import { msg2 } from './msg2'

function print() {
 console.log(`  ：${msg1}, ${msg2}`)
}

print()

하 는 일 은 msg 1 과 msg 2 두 파일 을 가 져 온 다음 두 문자열 을 출력 하 는 것 입 니 다.
우리 가 해 야 할 일 도'프레임'을'React 프레임'으로,'JS'를'JavaScript'로 바 꾸 는 등 간단 하 다.
새 src/loaders/replaceLoader.js 파일,

module.exports = function (source) {
 const handleContent = source.replace('  ', 'React  ').replace('JS', 'JavaScript')
 return handleContent
}

이렇게,로 더 가 다 썼어!!!
위 에서 말 했 듯 이 source 는 원본 파일 내용 이 고 인쇄 하면 다음 과 같 습 니 다.

Loader 사용 하기
다음은 루트 디 렉 터 리 에 새 파일 웹 팩.config.js 를 사용 하 겠 습 니 다.

const path = require('path')

module.exports = {
 mode: 'production',
 entry: './src/index.js',
 module: {
  rules: [
   {
    test: /\.js$/,
    use: './src/loaders/replaceLoader.js',
   },
  ],
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js',
 },
}

npx webpack 을 실행 하여 포장 결 과 를 확인 합 니 다 dist/main.js

(()=>{"use strict";console.log("  ：  React  ,     JavaScript")})();

교체 성공!
주의해 야 할 것 은 use 에 적 힌 loader 는 nodemodules 디 렉 터 리 에서 찾 은 것 입 니 다.사용자 정의 loader 이기 때문에 use:'replaceLoader'를 직접 쓸 수 는 없 지만 경 로 를 직접 쓰 는 방식 은 보기 어렵 습 니 다.웹 팩 을 통 해 설정 할 수 있 습 니 다.

module.exports = {
 resolveLoader: {
  modules: ['node_modules', './src/loaders'], // node_modules   ，  ./src/loaders 
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: 'replaceLoader',
   },
  ],
 },
}

loader options 가 져 오기
다 쓴 후에 생각해 보 자.사실은 기능 함 수 를 쓰 는 거 잖 아.
물론 이것 은 가장 간단 한 예 일 뿐 입 니 다.만약 에 loader 가 인 자 를 전달 할 수 있다 면 예 를 들 어:

module: {
 rules: [
  {
   test: /\.js$/,
   use: {
    loader: 'replaceLoader',
    options: {
     params: 'replaceString',
    },
   },
  },
 ],
},

이 때 this.query 를 사용 하여 얻 을 수 있 습 니 다.this.query.params 를 통 해 얻 을 수 있 습 니 다.여기 서 주의해 야 할 것 은 this 컨 텍스트 가 유용 하기 때문에 이 loader 내 보 내기 함 수 는 화살표 함수 가 될 수 없습니다.
그러나 웹 팩 은 loader-utils 모듈 을 추천 합 니 다.유용 한 도 구 를 많이 제공 합 니 다.가장 자주 사용 하 는 도 구 는 loader 에 전달 하 는 옵션 을 가 져 오 는 것 입 니 다.
일단 설치 해 야 돼 요.

npm i -D loader-utils

src/loaders/replaceLoader.js 수정

const { getOptions } = require('loader-utils')

module.exports = function (source) {
 console.log(getOptions(this)) // { params: 'replaceString' }
 console.log(this.query.params) // replaceString
 const handleContent = source.replace('  ', 'React  ').replace('JS', 'JavaScript')
 return handleContent
}

여기 서 주의해 야 할 것 은 getOptions(this)매개 변 수 는 this 입 니 다.즉,
인쇄 결과:
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }
this.callback()
위 는 모두 원래 내용 으로 전 환 된 내용 을 되 돌려 주 는 것 이지 만,어떤 장면 에 서 는 sourceMap 과 같은 다른 것 을 되 돌려 주어 야 한다.

module.exports = function (source) {
 //    Webpack      
 this.callback(null, source, sourceMaps)
}

또한 return 이 필요 없 기 때문에 return 대신 이 API 를 사용 할 수 있 습 니 다.

const { getOptions } = require('loader-utils')

module.exports = function (source) {
 const handleContent = source.replace('  ', 'React  ').replace('JS', 'JavaScript')
 this.callback(null, handleContent)
}

사용자 정의 loader 응용 장면
모든 function 에 try catch 코드 블록 캡 처 오 류 를 추가 하여 수 동 으로 번 거 롭 게 추가 하지 않도록 합 니 다.
중 영문 교체 실현:{{title}과 같은 텍스트 를 대체 할 수 있 습 니 다.대체 자 를 감지 하면 환경 변수 에 따라 중 영문 으로 바 꿀 수 있 습 니 다.
웹 팩 로 더 를 만 드 는 방법 에 대한 이 글 은 여기까지 입 니 다.웹 팩 로 더 의 실현 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!