FrontendSkills - loader (css loader, file loader, url loader) + cache control with hash

FrontendSkills 

:loader

| css 파일 - css loader

• css를 import하면 더 편하게 관리
• 컴포넌트 단위개발 시작, js,css 등등의 파일을 컴포넌트 단위로 모아서 개발하기 시작함 -> 통째로 import 하면 재사용성 증가 
• 따라서 웹팩은 css를 import하자!라는 결론 (loader를 통해 css를 분석해서 js화, import 결과물이 js의 형태로 나옴) -> 로더의 역할 이기도 함.

https://webpack.js.org/loaders/css-loader/#usage 참고

> css-loader적용시 file import

1.

import css from './Hello.css';

2.

import './Hello.css';

• loader안에 여러개 쓰면 배열, 하나만 사용시에는 객체

{

test: /\.css$/,

use: [ 'style-loader', 'css-loader' ]

},

• css 로더 사용시 아래와 같이 head에 추가 됨

• css parsing 된것을 style태그에 주입해주는게 style loader

> 주의할점

• 로더는 아래에서 부터 적용 (css-loader -> style-loader)

use: [ 'style-loader', 'css-loader' ]

> 문제점

• css 오염

>  해결방법

• css module 사용

import React from "react";

import study from './study.png';

import css from './Hello.css';

export default function Hello(){

return (<div className={css.Hello}>공부 시러<img src={study} alt=""/></div>)

}

| 이미지 파일 -file loader, url loader

> file-loader (파일 자체를 가져옴, 빌드해보면 암)

• 아래와 같이 hash를 주기도 함 , 파일이 바뀌어야 다른 해쉬가 나온다.

{

test: /\.(png|jpg|gif)$/,

use: [

{

loader: 'file-loader',

options: {

name: '[name][hash:8].[ext]'

}

}

]

}

• 아래 참고

> url-loader

• url-loader를 쓰면 js 번들링 코드안에 이미지가 내장됨

• fallback을 사용하기도 가능

fallback?

fallback

Type: String Default: 'file-loader'

Specifies an alternative loader to use when a target file's size exceeds the limit set in the limit option.

// webpack.config.js
{
  loader: 'url-loader',
  options: {
    fallback: 'responsive-loader'
  }
}

The fallback loader will receive the same configuration options as url-loader.

• file크기가 너무 크면, file-loader 사용하게 함
• url loader의 옵션으로 fallback을 씀
• limit 사용도 가능 (특정 크기 이상시 file loader 사용 [ex] limit 뒤 숫자 이상시 file-loader 사용 )

limit

Type: Number Default: undefined

A Number specifying the maximum size of a file in bytes. If the file is greater than the limit, file-loader is used by default and all query parameters are passed to it. Using an alternative to file-loader is enabled via the fallback option.

The limit can be specified via loader options and defaults to no limit.

// webpack.config.js
{
  loader: 'url-loader',
  options: {
    limit: 8192
  }
}

| 캐시 컨트롤 with hash (cache control)

• 아래와 같이 hash 값을 주면 번들링 파일이 새롭게 만들어지므로, 새롭게 js를 로드하므로 cache 남은것을 사용하지 않고 새로운 파일을 불러옴으로써 변경사항을 바로 적용할 수 있다. 그리고, htmlWebpackPlugin 사용해서 js를 자동으로 주입하므로 그 장점역시 활용 할수 있다.

• 해쉬는 기존 파일이 바뀌면 새로운 파일명을 만든다.

• 안바뀌면 기존 파일명을 그대로 쓴다.

ex) file-loader 사용시 새롭게만들고 url-loader 사용시에는 그대로

output:{

filename: '[name].[hash].bundle.js'

},

• 헤더에 있는 cache control에 시간이 정해져있음

| postcss

auto prefixer 사용함 :: 과 같이 사용

https://github.com/postcss/autoprefixer

| env

process.env 는객체