[Webpack] - #4 Loader

 [ Webpack 시리즈 ]

 

[Webpack] - #1 Webpack이란?

[Webpack] - #2 Entry

[Webpack] - #3 Output

[Webpack] - #4 Loader

[Webpack] - #5 Plugin

[Webpack] - #6 Dev Server

[Webpack] - #7 웹팩 세팅하기 (feat: ES module)

 

 

 

 

Loader

• 웹팩이 웹 어플리케이션을 해석할 때 웹 자원을 변환시켜주는 속성
• 자원을 해석할 때 js, json파일을 기본으로 본다.
• 만약 다른 파일을 모듈로 불러와 사용하게 될 경우, loader 라는 요소를 설정해줘야 한다.

// webpack.config.js

module.exports = {
	module: {
    	rules: [
        	{
            	test: ,
                use:[]
            }
        ]
    }
}

• module 을 사용
• loaders의 설정은 rules 프로퍼티를 정의해야하고, rules 프로퍼티는 test와 use를 필수 프로퍼티로 갖고 있다.
  • test : 변환해야하는 파일 또는 파일들을 식별하는 역할, 정규식으로 패턴 매칭이 가능하다.
  • use : 변환 되어야하는 파일에 대해 어떤 로더를 사용할지 설정

 

 

 

CSS Loader

• CSS를 모듈로 사용하기 위해 사용되는 로더
• 기존 CSS는 선택자의 이름이 전역으로 적용 -> 어플리케이션 규모가 커질수록 선택자 이름이 중복되지 않도록 해야함
• CSS Loader를 사용하면 class이름 중복 우려 감소

npm i css-loader -D

// webpack.config.js

module.exports = {
	entry: './app.js',
    output: {
    	filename: 'bundle.js'
    },
	module: {
    	rules: [
        	{
            	test:/\.css$/,
                use:['css-loader']
            }
        ]
    }
}

 

 

• 로더를 여러개 사용하는 경우에는 rules 배열에 옵션을 추가하면 된다.

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

 

 

 

Loader 적용 순서

 

• 여러개의 로더를 사용하는 경우 순서에 주의해야한다.
• 로더는 기본적으로 오른쪽에서 왼쪽으로 적용된다.

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

scss 파일에 대해 먼저 전처리(scss 파일을 css 파일로 변환)를 한 다음 웹팩에서 css 파일을 인식할 수 있도록 로더로 적용하는 코드