👩💻 인프런 강의
ㅎㅎ작년에 결제한 강의인데 올해 처음부터 다시 듣고있다... 흐름이 끊기다보니 다 까먹었다ㅠ 처음부터 다시 들어도 생소한 부분도 있고 조금 더 이해가 가는 부분도 있었다. 강의 하나에 시간이 길진 않지만 따라서 타이핑하고 구글링해보고 하느니라 시간이 오래 걸린다!! 그리고 자꾸 npm install 할 때 프록시 땜에 한 방에 되는 법이 없어서 시간을 다 잡아 먹는다!! 진짜 왜그러는지 모를... 이제 하루에 1강씩 꼭 듣고 그 날 들은 강의 내용을 정리해서 업로드 해야겠다! 👊
Webpack Loader
1. Loader의 역할
- 다른 언어를 자바스크립트 문법으로 변환
- 이미지를 data URL 형식의 문자열로 변환
- css 파일을 자바스크립트에서 직접 로딩하게 해줌
2. Loader 작성법
module : {
rules : [
{
test: /\.js$/,
use: [
path.resolve('./my-webpack-loader.js')
]
}
]
}- module에 rules라는 배열을 가짐
- rules 배열 안에 test, use의 키를 갖는 객체를 씀
- test 키는 로더가 처리해야할 파일의 패턴을 입력 (정규표현식)
- /.js$/ 값은 .js로 끝나는 모든 파일, 로더가 처리해야할 파일의 패턴을 입력 (정규표현식)
- use 키는 사용할 로더를 명시 (path.resolve 함수를 써서 절대경로를 가져옴)
- path.resolve는 인자로 받은 경로들을 하나로 합쳐러 문자열 헝태로 리턴
👩💻