Webpack의 로더

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

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

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

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

terminalnpm install test-loader1 --save-dev

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

terminalnpm install test-loader2 --save-dev

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

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

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

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

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

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