> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/webpack/webpack/webpack-loaders.md).

# Webpack 로더

기본적으로 Webpack은 JavaScript 및 JSON 파일만 해석 가능합니다. 하지만 로더(loaders)를 사용하면 Webpack이 다른 포멧의 파일을 처리하고, 이를 앱에서 사용할 수 있는 모듈로 변환 할 수 있습니다.

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
module.exports = {
  // 모듈
  module: {
    // 규칙
    rules: [
      // 로더 설정
      {
        test: /파일_포멧_정규식/,
        use: ['로더']
      },
      // 로더 추가 설정...
    ]
  }
}
```

{% endtab %}
{% endtabs %}

## 로더 설정 <a href="#setting-loaders" id="setting-loaders"></a>

{% content-ref url="/pages/-MTdbvzVNgkcow3fNIxi" %}
[File 로더](/webpack/webpack/webpack-loaders/file-loader.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTdgjOGZSbVPe9UkXaz" %}
[CSS 로더](/webpack/webpack/webpack-loaders/css-loader.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTm5JeBDzBM6JOhodnV" %}
[PostCSS 로더](/webpack/webpack/webpack-loaders/postcss.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTdqYIk0VX8oZGIbIOC" %}
[Sass 로더](/webpack/webpack/webpack-loaders/sass-loader.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTe2dYF-nWilDQXPg8Z" %}
[Babel 로더](/webpack/webpack/webpack-loaders/babel-loader.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTm5SrGMSieIo5yf1Qj" %}
[TypeScript 로더](/webpack/webpack/webpack-loaders/typescript.md)
{% endcontent-ref %}

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://webpack.js.org/concepts/#loaders>" %}
로더(Loader)란?
{% endembed %}

{% embed url="<https://webpack.js.org/loaders/>" %}
Webpack Loader 목록
{% endembed %}