WebPack 썸네일형 리스트형 웹팩으로 바벨 통합하기(babel-loader) 바벨을 따로 돌리지 않고 웹팩에서 로더로서 불러와서 같이 실행 시킬 수 있다. npm install babel-loader 웹팩 config 파일에서 module 객체의 rules 배열에 하나의 로더를 더 추가해주자. 요런식으루 config 파일에 넣어서 같이 사용해주면 되겠다. 더보기 바벨로 브라우저에 맞는 코드로 변환하기(targets) 전에 바벨플러그인으로 일일이 하나하나의 기능에 맞게 설정을 해주고 그것들을 묶음으로 관리하는 프리셋에 관해 알아보았다. 하지만 실제 개발에서는 일일이 하나하나의 플러그인을 사용하지 않고 preset/env 를 이용해 한번에 코드를 변환 시켜 줄 수 있다. 그리고 targets 객체를 통해 각각 브라우저에 맞는 버전의 자바스크립트 코드로 변환이 가능하다. caniuse 사이트에 브라우저 버전에 따라 호환되는 문법을 알 수 있기 때문에 이런식으로 chrome 에선 지원하지만 ie에서 지원하지 않는다면 모든 브라우저에 맞게 변환되어야 하기 때문에 코드가 바뀌는 것을 확인 할 수 있다. 더보기 바벨 플러그인 사용하기 이전 글에서 직접 커스터마이징해서 간단히 바벨의 동작원리를 알아보는 시간이 있었다면 이제 바벨에서 제공해주는 플러그인으로 간단히 변환시켜 보자. 우선 플러그인을 설치해준 뒤에 npm install @babel/plugin-transform-block-scoping const 는 성공적으로 바뀌엇으니 이제 애로우 함수를 바꾸어 보자. npm install @babel/plugin-transform-arrow-functions 성공쓰 파일 상단에 엄격한 자바스크립트 모드를 나타내는 'use strict' 문구를 적어주는 플러그인도 설치해보자 npm install @babel/plugin-transform-strict-mode 이렇게 매번 바벨을 실행시킬 때 마다 문구가 길어지게 되는데 config 파일을 통.. 더보기 Babel 이란? 기본 동작 원리 바벨은 컴파일러다. 웹팩과 비슷하다고 느끼고 어느 것을 써야 할지 모르겠다면 그것은 살짝 잘못된 개념이라 볼 수 있겠다. 웹팩은 수많은 라이브러리를 이용한 자바스크립트 파일들을 하나로 짠 묶어서 만들어주는 것이고 바벨은 코드 자체를 자바스크립트로 변환 시켜주는 것이다. 그렇다 바벨도 es6이상을 지원하지 않는 등 최신 브라우저에서 뿐이 아닌 다른 브라우저에서도 지원해주는 언어로 변환 시켜 주는 것이다. 바벨을 설치하고 기본동작에 관해 알아보자 npm install @babel/core // 바벨~ npm install @babel/cli // webpack-cli 처럼 터미널에서 바벨을 쓸 수 있게 하기 위해 한 번 IE 에서는 지원하지 않는 es6 문법으로 된 스크립트 파일을 하나 만들어보자 화살표 함.. 더보기 자주 사용하는 플러그인 (webpack) 직접 플러그인을 만들어서 사용하는 경우는 거의 없을 것이고 웹팩에서 직접 제공하는 플러그인이나 이미 유명한 라이브러리를 사용하는데 자주 쓰는 플러그인에 대해 알아보자. ** BannerPlugin 결과물에 빌드 정보나 커밋 버전 같은 것을 추가 할 수가 있다. 웹팩에서 기본적으로 제공하는 플러그인으로 한 번 사용해보자 config 파일에서 웹팩에서 제공해주는 플러그인이기 때문에 const webpack = require('webpack'); 이렇게 해주면 빌드된 결과물 상단에서 메세지를 볼 수가 있다. 한 번 더 예시로 빌드 된 데이트와 깃 사용자 이름을 한번 넣어보자 노드에서 모듈로 child-process 라는 것을 제공하는데 명령어를 그대로 가져와서 쓸 수 있게 해준다. ** DefinePlugin.. 더보기 Plugin (webpack) 웹팩에서 알아야 할 마지막 개념이라고도 할 수 있는 플러그인에 대해 알아보겠다. 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다고 하는데 코드를 난독화 하거나 특정 텍스트를 추출하는데 쓰인다고 하니 직접 한번 코드를 짜가면서 동작 원리를 익혀보자. 로더는 함수로서 동작한다면 플러그인은 클래스로서 동작한다고 보면 되겠다. 우선 플러그인 클래스 파일을 하나 만들어주고 exports 해주자. 그리고 webpack.config 파일로 가서 상단에 임포트 해준뒤에 new 키워드를 통해 객체를 생성해주고 빌드를 해보면 콘솔에 제대로 찍히는 것을 확인 할 수 있다. 그전에 로더로 콘솔에 찍어보았을 때는 각 확장자 옵션에 해당하는 모든 파일들을 돌면서 번들링을 해주면서 콘솔에 찍어보았을 때는 파일의.. 더보기 자주 사용하는 로더 css-loader css 로더를 사용하게 되면 자바스크립트에서 css파일을 모듈로 불러올 수 있다. 즉 css파일을 읽어서 자바스크립트 코드 로 가져올 수 있는 것이다. 먼저 app.css 파일을 하나 만든 뒤에 body에 백그라운드만 아쿠아로 설정 해준 뒤에 app.js 파일로 가서 임포트를 해준 뒤에 웹팩을 돌려보면 아래와 같은 에러가 뜬다. 웹팩은 알다시피 모든 파일을 모듈로서 해석하는데 css파일코드를 자바스크립트 코드로 파싱하는데 에러가 생겼다고 한다. 이렇게 css 파일을 파싱해주는게 바로 css-loader 로서 우선 설치해준다. npm install css-loader webpack.config 파일로 가서 요론 식으로 설정해주면 되겠다. 그리고 빌드 된 main.js 파일에서 찾아보면 .. 더보기 로더란 웹팩은 '모든' 파일을 모듈로 인식하고 바라보기 때문에 이미지, 폰트 까지도 import 구문을 사용하면 자바스크립트 코드로 가져올 수 있는데 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 데이터 URL 형식의 문자열로 반환 등의 역할을 한다. 실제로 어떻게 사용하는지 한번 알아보자 우선 로더는 함수로서 역할을 하기 때문에 파일을 만들어 보자. my-webpack-loader 라는 자바스크립트 파일안에 위의 코드를 예로 작성해보았다. 이제 다시 webpack .config 파일로 들어가서 모듈이라는 객체명의 rules 항목을 통해 로더들을 설정해줄 수가 있다. 사용법을 보면 알겠지만 test는 .js 확장자 즉 모든 자바스크립트 파일을 돌게하는.. 더보기 이전 1 2 다음
