[Today I Learned] webpack 환경변수 설정

기존 cra 방식과는 다르게 webpack으로 초기세팅 후 환경변수를 설정 할 때는
dotenv 패키지를 설치해야함.

npm i dotenv --save-dev

.env 파일을 상위루트에 생성 후 변수와 값을 지정해주는데

FIREBASE_APP_ID = 키값

API_KEY = api 키값

기존 CRA방식에서는 해당 값에 process.env.REACT_APP작성 후에 apikey를 쓰지만
위와같이 webpack을 초기설정시에는 생략을 해도 된다.

webpack.config.js 파일로 이동 후에

const dotenv = require('dotenv'); // dotenv 패키지를 가져와 dotenv에 할당
dotenv.config(); // dotenv.config 실행

전역 변수로 dotenv 를 만들고 dotenv 패키지를 가져와 해당변수에 할당한다.
그 후에 바로 실행을 시켜준다.

plugins: [
		new webpack.DefinePlugin({
			"process.env": JSON.stringify(process.env),
		}),
	],

그 후 plugins 속성안에 해당 값을 넣으면 된다.

const Landing = () => {
  console.log(process.env.FIREBASE_API_KEY);

  return <StyleTest>Landing 페이지</StyleTest>;
};

key값이 잘나오나 테스트하기위해 아무 컴포넌트에서 콘솔로그를 찍어보니 apikey가 정상적으로 찍힌다.