Webpack 공식 홈페이지 따라하기 (5) - Loaders

 

loader는 모듈 소스 코드에 변경 사항을 적용하는 역할을 수행한다.

1. 파일을 import하거나 "로드"할 때 TS와 같은 다른 언어에서 JS로 변환하거나 인라인 이미지를 데이터 URL로 로드 등전처리 할 수 있다
2. JS 모듈에서 직접 CSS 파일을 import하는 작업도 수행 할 수 있다.

 

1. Example

모든 .css 파일에 css-loader를 사용하고 .ts 파일에는 ts-loader를 사용하도록 webpack에 다음과 같이 지시할 수 있다.

module.exports = {
	module: {
		rules: [
        	{ test: /\.css$/, use: 'css-loader' },
            { test: /\.ts$/, use: 'ts-loader' },
        }
    }
}

 

2. Using Loaders

애플리케이션에서 로더를 사용하는 방법이 있다.

• 설정 (추천) : webpack.config.js 파일에 지정

3. Configuration

이전 포스트에서 module.rules를 사용하면 webpack 설정 내에 여러 개의 로더를 지정할 수 있는 것을 배웠다.

 module.exports = {
 	module: {
    	rules: [
        	{
            	test: /\.css$/,
                use: [
                	{ loader: 'style-loader' },
                    {
                    	loader: 'css-loader',
                        options: {
                        	modules: true,
                        },
                       },
                       { loader: 'sass-loader' },
                       // ...

 

4. Loader Features

• 로더는 연결할 수 있습니다. 체인의 각 로더는 처리된 리소스에 변환을 적용합니다. 체인은 역순으로 실행됩니다. 첫 번째 로더는 결과(변환이 적용된 리소스)를 다음 로더로 전달하며, 전달은 다음 로더로 계속됩니다. 마지막으로, webpack은 체인의 마지막 로더가 JavaScript를 반환할 것으로 예상합니다.
• 로더는 동기식 또는 비동기식일 수 있습니다.
• 로더는 Node.js에서 실행되며 Node.js에서 가능한 모든 작업을 수행 할 수 있습니다.
• 로더는 options 객체로 구성 할 수 있습니다. (여전히 query 파라미터를 사용하여 옵션을 설정할 수 있지만 권장하지 않음)
• 일반 모듈은 loader 필드가 있는 package.json을 통해 main 및 로더를 내보낼 수 있습니다.
• 플러그인은 로더에 더 많은 기능을 제공 할 수 있습니다.
• 로더는 추가로 임의의 파일을 생성할 수 있습니다.

로더는 전처리 기능을 통해 결과물을 커스터마이즈 할 수 있도록 한다.