[프론트엔드 개발환경과 실습] Webpack #3

👩‍💻 인프런 강의

모든 내용을 완벽히 다 이해할 순 없지만 그래도 머릿 속에 내용을 박기 위해서 코드를 따라서 타이핑도 해보고 강의 내용을 정리하면서 되짚어보고있다. 음 뭔가 시간이 좀 더 지나서 내가 아는게 더 많아진다면 이때 들었던 것들이 이런거였구나 하면서 더 잘 이해될 것 같다. 일단 한번 다 훑은 다음에 다시 첨부터 공부해봐야겠다.

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 배 증가함