cross-env 패키지 / webpack 설정 development와 production으로 나누기

 

개발일때에는 development, 배포일때에는 production로 process.env.NODE_ENV를 구분해서 webpack의 설정을 진행해야하는 경우들이 있다.

예를 들면... 보안에 안좋아서 옵션을 달리해야한다던가..?

 

맥에서는 명령어만 삽입해도 진행이 되는데, windows에서는 라이브러리를 사용해줘야한다.

 

cross-env는 이때 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입해주는 패키지이다.

이것을 사용하면 동적으로 process.env(환경 변수)를 변경할 수 있다.

 

 

설치

npm i cross-env

 

사용할 커맨드 앞에 cross-env 를 붙여주기만 하면 된다.

 

 

 

package.json

사용 전 

"scripts": {
    "dev": "next -p 3060",
    "build": "ANALYZE=true NODE_ENV=production next build",
 },

 

 

사용 후

"scripts": {
    "dev": "next -p 3060",
    "build": "cross-env ANALYZE=true NODE_ENV=production next build",
 },

 

 

이렇게 간단하게 해결해주는 패키지이기 때문에 많은 사람들이 사용하고,

그렇기 때문에 비슷한 이름으로 해서 사용자를 헷갈리게 하여 설치하는 순간 정보를 빼가는 해커들도 있었다.

 

 

보안뉴스 캡쳐

 

보안뉴스

https://www.boannews.com/media/view.asp?idx=56184&skind=O

개발자는 속이기 쉽다? 자바스크립트 저장소 npm 감염되다

 

 

해커가 crossenv 라는 패키지를 배포하였고, 개발자가 install시 실수로 '-'를 빼고 설치하게되면 .env 파일을 가져가는 사건도 있었다.

.env에는 보안적인 정보들이 담겨있으니...

 

 

npm 블로그

https://blog.npmjs.org/post/163723642530/crossenv-malware-on-the-npm-registry.html

npm Blog Archive: `crossenv` malware on the npm registry

 

 

오늘도 이렇게 좋은 패키지를 알아간다ㅎㅎ