[React JS] webpack으로 build 시 html에 환경변수 넣는 법

살다보면 react 를 spa가 아닌 mpa로, 또 배포를 cra가 아닌 webpack으로 할 때가 있다.

더 나아가 html을 여러개로 쪼개는데 cra에서는 html에서 환경변수가 잘 먹혔는데 webpack에서는 안 먹히는 경우도 있다.

​

보통 CRA로 build할 시 public/index.html에는 환경변수를 이렇게 사용한다.

 

cra로 즉, react-scripts로 build할 시 잘 적용이 되지만

​

webpack으로 build를 할 시 빌드 파일을 열어보면 그대로 나온다.

 

이미 new webpack.DefinePlugin()을 이용하여 html이 아닌 react 컴포넌트내에서는 환경변수가 잘 작동되는 것을 확인했었지만 html은 왜 안되는 것일까?

 

이럴 때 npm install interpolate-html-plugin를 설치하여 webpack.config.js의 plugin에 추가해주는 방법도 있다.

​

하지만 나는 기왕이면 다른 라이브러리를 설치하지 않고 이미 설치 되어있는 라이브러리를 활용하는 방법을 찾고 싶었다.

​

해법은 어이 없게도 간단했다.

CRA로 빌드할 때와 webpack으로 빌드할 때에 왜 문법이 다른 지는 모르겠지만,

%PUBLIC_URL% 이것을 <%= process.env.PUBLIC_URL %> 로 변경해주면 되는 것이었다.

 

빌드할 html 템플릿

.env파일

빌드된 html

하지만 꼭 webpack.config.js의 new webpack.EnvironmentPlugin은 빼먹지 말아주자

 

module.exports = (_env, argv) => {
  const isProd = argv.mode === 'production'
  const isDev = !isProd
  
  return {
    plugins: [
      // 환경 변수 플러그인 인스턴스 생성
      new webpack.EnvironmentPlugin({
          'process.env': JSON.stringify(process.env)
      })
    ]
  }
}