🔧Webpack : Loader

이번 포스팅에서는 로더에 관해서 다룰 것이다. 웹팩은 모든 파일들을 모듈로 바라본다. 따라서 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있다. 즉, import 구문을 사용해서 자바스크립트 코드롤 사용할 수 있는 이유는 바로 로더 때문이다. 로더는 타입스크립트와 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립에서 직접 로딩할 수  있도록 해준다.

---

로더의 동작 원리

우선 아래와 같이 로더를 관리하는 js 함수형 파일을 하나 만들어야 한다.

// my-webpack-loader.js

module.exports = function myWebpackLoader(content) {
  console.log('myWebpackLoader가 동작함');
  return content;
}

이제 이 파일을 webpack.config.js에서 관리 할 수 있게 코드를 아래와 같이 추가한다.

// webpack.config.js

/* 이하 생략 */

module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          path.resolve('./my-webpack-loader.js')
        ]
      }
    ]
  }

 

• module: Webpack 설정의 주요 섹션 중 하나로 모듈 관련 설정을 포함한다.
• rules: module 섹션 내의 배열로 파일을 처리하기 위한 규칙들을 정의한다. 각 규칙은 객체로 표현된다.
• test: 각 규칙 객체 내의 속성으로 파일 이름 또는 경로가 이 정규 표현식과 일치하는 파일에 대해 이 규칙을 적용한다. 여기서는 \.js$ 정규 표현식을 사용하여 모든 .js 파일을 대상으로 지정한다.
• use: use 속성은 해당 파일에 적용할 절대경로로 로더를 지정한다. 이 경우에는 사용자 정의 로더를 사용하고 있다. path.resolve('./my-webpack-loader.js')는 프로젝트 루트 디렉토리에 있는 my-webpack-loader.js 파일의 절대 경로를 반환한다. 따라서 이 로더는 my-webpack-loader.js 파일에서 정의한 대로 .js 파일을 처리한다.

 

위와 같이 작성을 하고 yarn run build를 하게되면 아래와 같은 결과를 확인 할 수 있다.

:: CMD
:: npm run build
:: yarn run build

myWebpackLoader가 동작함
myWebpackLoader가 동작함
Hash: 83800a72d220d80c4d42
Version: webpack 4.47.0
Time: 383ms
Built at: 2024. 07. 12. 오후 7:29:05
  Asset      Size  Chunks             Chunk Names
main.js  4.57 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/app.js] 126 bytes {main} [built]
[./src/math.js] 47 bytes {main} [built]

여기서 우리는 의문이 든다. 왜 'myWebpackLoader가 동작함'이 두 번 찍힐까? 우선 우리가 설정한 webpack.config.js의 Entry의 경로 설정을 보면 './src/app.js'로 설정이 되어 있다. 따라서 app.js는 app.js를 실행하기 전, math.js를 실행하고 app.js를 실행한다. 즉, js 파일 로더가 두 번 실행 된 것이다.

---

간단하게 로더 커스텀하기

이번에는 math.js에 있는 console.log를 alert로 동작 할 수 있게 커스텀 해보자. 아래와 같이 코드를 수정하면 된다.

module.exports = function myWebpackLoader(content) {
  return content.replace('console.log(', 'alert(');
}

이제 잘 실행이 되는지 확인을 하기 위해서 아래와 같이 명령을 해보자.

:: CMD

start index.html

실행을 해보면 아래와 같이 에러가 나온다.

이는 초반 강의에서도 cors 문제가 있었다.

Access to script at 'file:///D:/myclass/0_Programming-content/Frontend-Development-Environment/dist/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.Understand this error
main.js:1 
        
        
Failed to load resource: net::ERR_FAILEDUnderstand this error

위 에러는 file 경로로 파일을 열려고 시도해서 발생하는 보안 오류이다. 이를 해결하기 위해선 Live Server로 실행하면 된다. 실행하게 되면 console.log로 찍현던 '3'이 alert로 출력되는 것을 확인 할 수 있다.

---

다음 포스팅에서는 자주 사용되는 로더에 관해서 다루어 볼 것이다.