[React] Webpack 로더(Loader)

Loader란? 

js파일이 아닌 HTML, css, img, 등을 변환할 수 있도록 도와주는 속성, webpack으로 애플리케이션을 빌드할때 import 한 웹 자원 파일을 해석하기 위한 적절한 로더 필요 

웹팩의 로더는 각 파일을 처리하기 위한 것 -> 처리해야할 파일의 패턴을 명시 

파일이 여러개라면 로더 함수도 여러번 동작 

- 파일이 2개일시 2번 동작 

 

 

 

loader 설치 방법

$ npm install [loader_name]

 

 

loader 기본 

my-webpack-loader.js

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

// mywebpackLoader 동작함
// mywebpackLoader 동작함

 

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('./dist'),
    },
    module: {
        rules: [{
            test: /\.js$/,   //.js 확장자로 끝나는 모든 파일
            use: [path.resolve('./my-webpack-loader.js')]
        }],
    }
}

 

 

loader의 종류 

1. css-loader

- 엔트리포인트부터 시작해서 모든 파일을 사용 

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

 

2. style-loader

...
    module: {
        rules: [{
            test : /\.css$/,
            use : [
                'style-loader',
                'css-loader'
            ]
        }],
    }
 ...

- 자바스크립트로부터 변경된 코드를 html에 넣어줌 

- 순서는 뒤에서부터 앞에 

 

 

3. file-loader

- 소스코드에서 사용하는 모든 파일들을 모듈로 사용할 수 있게 해줌

- 파일을 모듈 형태로 지원하게 해주는것 -> css에서 url()함수에 이미지 파일 경로 사용 , file-loader  이용해서 파일 처리 

- 웹팩은 빌드할때마다 유니크한 값을 생성 

 

webpack.config.js

   module: {
        rules: [{
            test: /\.css$/,   //.js 확장자로 끝나는 모든 파일
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.png$/,
            use: [
                'file-loader'
            ]
        }

        ],
    }

 

경로 문제가 있기 때문에 다음과 같이 변경 (options를 사용)

 

 

webpack.config.js

        {
            test: /\.png$/,
            loader : 'file-loader',
            options : {
                publicPath :  './dist/',
                name : '[name].[ext]?[hash]'
            },
        }

 

app.css

body{
    background-image : url(rupy.png); 
}

 

 

 

 

 

4. url-loader

- 한페이지 안에서 작은 이미지 여러개를 사용한다면 Data-URI 방법 사용

- 이미지 태그를 쓸때 경로를 사용, 문자열 형태를 사용, 작은 파일들은 바로 html로 넣는것이 효율적임 

- limit 설정? 2000의미? 2KB이하의 파일들은 url-loader로 처리해서 Base64로 변환, 2KB이상이면 file-loader가 실행

 {
            test: /\.(png|jpg|gif|svg)$/,
            loader : 'url-loader',
            options : {
                publicPath :  './dist/',
                name : '[name].[ext]?[hash]',
                limit : 2000, //2kb
            },
        }

- 실제로 css창에 들어가보면 이런식으로 Base64로 되어있는것을 확인할 수 있음 

 

 

 

 

5. postcss-loader

 

 

6. sass-loader

 

 

 

참고)

npm install css-loader@3 file-loader@5 style-loader@1

 

커스텀 로더

(1) css-loader