2021-06-23 :: babel과 webpack 설정하기

ts => babel => js

 

Webpack

webpack 공통 패키지

npm i -D webpack @babel/core babel-loader @babel/preset-env @babel/preset-react

ts용 패키지

npm i -D @types/webpack @types/node @babel/preset-typescript

css관련 패키지

npm i style-loader css-loader

설치시에 오타나면 재빠르게 ctrl+C를 눌러 중단하도록 하자

 

webpack.config.ts

ts에서 변수명 뒤에 :

변수의 타입을 더욱 엄격하게 한다.

js로 사용하고 싶다면 :뒤의 변수형태 내용을 삭제하도록 한다.

 

webpack설정을 통해 .env 사용 가능하게 하기

원래 노드 런타임, 백앤드에서만 .env만 사용이 가능하지만

webpack의 EnvimentPlugin을 설정해두면 프론트에서도 접근할 수 있다

 

여튼 앤트리부터 시작해서 여러가지 설정이 적용이되고 그 결과물이 output이다.

그 결과물은 [name].js로 생성이 된다. 결과물은 여러개로 저장할 수도 있다.

 

마지막으로 아래에 개발환경에서 쓰는 플러그인과 배포환경에서 쓰는 플러그인을 분리해서 설정할 수 있다.

프론트앤드의 최종 결과물은 결국에는 html css js로 바뀐다.

 

시작은 client.tsx에서 한다.

프론트 개발은 브라우저가 html파일을 인식하는 것에서 시작한다.

성능, 검색앤진 향상을 위해서는 결국 index.html의 중요성을 인정해야 한다. spa

spa의 성능향상을 위해 코드스플리팅, 서버사이드랜더링을 사용하지만 결국에는 index.html이 중요

css는 개발자 도구를 많이 참고

 

webpack 실행 명령어는 npx webpack

npm i webpack -g

-g옵션은 글로벌 설치를 의미한다. 그냥 webpack만 해도 실행이 된다는 의미

아직 webpack 5를 지원하지 않는 패키지가 많아서 버전 4을 권장한다.

 

tsconfig-for-webpack-config.json

TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack

명령어가 너무 길다싶으면 package.json에 저장 가능하다

  "scripts": {,
    "build": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack",
  },

다음과 같이 scripts build에 저장을 해 두면 npm run build로 줄여 사용할 수 있다. 위 명령어는 윈도우에서는 안되고 리눅스에서만 작동된다. 그래서 cross-env라는 패키지를 또 추가해주어야 한다.

npm i cross-env

npm i ts-node

에러나면 뭐 설치해야한다는 생각도 해야한다.

 

npm run build