Webpack의 로더

Webpack의 기능을 확장하기 위해 로더도 사용됩니다. 로더는 특정 유형의 파일을 가져와 정해진 작업을 수행할 수 있게 해줍니다.

예를 들어, 확장자가 .less인 모든 파일을 가져와 그 텍스트를 CSS로 변환한 다음, 얻은 CSS를 최소화(minify)하여 하나의 공통 파일로 저장할 수 있습니다.

두 개의 가상 로더를 예로 들어 로더 작업의 일반적인 방식을 살펴보겠습니다.

첫 번째 로더를 설치해 보겠습니다:

npm install test-loader1 --save-dev

두 번째 로더를 설치해 보겠습니다:

npm install test-loader2 --save-dev

로더를 설치한 후에는 구성 파일에서 사용할 수 있습니다(로더를 가져올(import) 필요는 없습니다). 구문을 확인하세요:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // 파일 유형
				use: ['test-loader1', 'test-loader2'], // 로더
			},
		],
	},
};

배열 요소를 한 줄이 아닌 세로로 나열하여 작성할 수도 있습니다:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [
					'test-loader1',
					'test-loader2'
				],
			},
		],
	},
};

다른 유형의 파일에 대해 다른 규칙을 작성할 수 있습니다:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.sass$/i,
				use: [
					'test-loader1',
					'test-loader2'
				],
			},
			{
				test: /\.less$/i,
				use: [
					'test-loader3',
					'test-loader4'
				],
			},
		],
	},
};

로더는 순서대로 실행됩니다. 이때 순서는 배열의 끝에서 시작됩니다. 즉, 배열의 마지막 요소로 지정된 로더가 먼저 실행되고, 그 다음은 마지막에서 두 번째, 이런 식으로 진행됩니다.