👩💻 인프런 강의
모든 내용을 완벽히 다 이해할 순 없지만 그래도 머릿 속에 내용을 박기 위해서 코드를 따라서 타이핑도 해보고 강의 내용을 정리하면서 되짚어보고있다. 음 뭔가 시간이 좀 더 지나서 내가 아는게 더 많아진다면 이때 들었던 것들이 이런거였구나 하면서 더 잘 이해될 것 같다. 일단 한번 다 훑은 다음에 다시 첨부터 공부해봐야겠다.
Webpack Loader
css-loader
- npm install css-loader
- import로 css 파일을 모듈로 불러옴
- 빌드를 돌리면 main.js 안에 스타일이 자바스크립트 문자열로 들어가짐
module : {
rules : [
{
test: /\.css$/,
use: [
'css-loader'
]
}
]
}style-loader
- npm install style-loader
- 자바스크립트 문자열로 들어간 css가 cssom이란 형태로 바뀌어야 브라우저에서 보여짐
- head 안에 인라인 스타일로 들어가짐
- 원본파일명과 확장자 그리고 캐시 무력화를 위해 달라진 해쉬값을 입력 (body {background-image:url(./dist/bg.png?5c6d3b633991b51295c68b34d8b94c8b);})
{
test: /\.png$/,
loader: 'file-loader',
options: {
publicPath: './dist/',
name: '[name].[ext]?[hash]'
}
}url-loader
- 한 페이지에서 작은 이미지를 여러 개 사용한다면 Data URI Scheme을 이용
- 20KB 미만의 이미지는 Base64로 인코딩 (자바스크립트 문자열로 변환되어 main.js로 들어가짐)
- 20KB 이상의 이미지는 file-loader가 실행 (dist 폴더 안으로 파일 복사)
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
publicPath: './dist/',
name: '[name].[ext]?[hash]',
limit: 20000, //20kb
}Data URI Scheme 장점
- 이미지와 같은 외부 데이터를 별도의 파일로 두지 않고 하나의 HTML 파일로 관리할 수 있음
- HTTP 헤더정보나 TCP 패킷 크기가 맞지 않아서 발생하는 오버헤드가 발생하지 않음
- 리퀘스트 수를 줄여 빠른 전송효과를 볼 수 있음
- 신뢰할 수 없는 통신 채널을 통해 바이너리 데이터를 안전하게 전송할 수 있게함
Data URI Scheme 단점
- HTML 파일이므로 캐쉬가 되지 않는다.
- Base64로 인코딩함으로써 기존 데이터의 용량보다 1/3 배 증가함
👩💻