webpack dev Server 구동여부 확인하기

현재 mode가 development인지, build인지 분간하여, 다른 명령을 주고 싶다.

이전 시도(현재 적용되지 않음)

하기 방법으로 시도하지 마시오.

export default class AppQueryMaker {
    constructor(){
      //development일 때 사용할 코드(중개 서버 없음)
        // this.resultQuery = 
        // '?' + 
        // encodeURIComponent('serviceKey') + 
        // '='+
        // '나의 서비스 키; /*Service Key*/
    
        // this.url = '데이터 가져오는 url'; /*URL*/

      //build일 때 사용할 코드(중개 서버 있음)
        this.resultQuery = "/request/?";
        this.url = '';
    }
  
  //...후략
}

현재는 devlopment의 여부는 package.json의 scripts를 무엇으로 하느냐에 따라 다르다.

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production",
    "start": "node ./server/server.cjs"
  },

• development일 경우, webpack-dev-server를 통하여 구동한다.
• build일 경우, 자체 server를 사용하여 빌드하고, npm start 명령어를 통하여 구동한다.

다음 링크를 참조한다.

process.env.WEBPACK_DEV_SERVER 변수를 통하여 dev server가 구동중인지 확인 할 수 있다.

다음과 같이 코드를 변경하면, isDevServer의 여부에 따라 다른 작동을 수행할 수 있'었'다.

export default class AppQueryMaker {
    constructor(){
        const isDevServer = process.env.WEBPACK_DEV_SERVER;

        if(isDevServer){
            this.resultQuery = 
            '?' + 
            encodeURIComponent('serviceKey') + 
            '='+
            '나의 서비스 키'; /*Service Key*/
        
            this.url = '데이터 가져오는 url'; /*URL*/
        }
        else{
            this.resultQuery = "/request/?";
            this.url = '';
        }
    }

그런데, Webpack 5부터는 위를 지원하지 않는다.
Webpack 5에 대한 공식 문서

webpack 5 does no longer include a polyfill for this Node.js variable. Avoid using it in the frontend code.
webpack 5는 더 이상 이 Node.js 변수에 대한 폴리필을 포함하지 않습니다. 프론트엔드 코드에서 사용하지 마십시오.

이제 더 이상 process를 지원하지 않아 development 코드에서 다음과 같은 오류가 발생한다.

Uncaught ReferenceError: process is not defined

새로운 시도

공식문서에서 제시한 EnvironmentPlugin을 사용하려고 한다.

다음과 같이 설정한다.

webpack.config.js

{
  //중략...
  plugins: [
    //중략...
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development'
    }),
  ],
}

EnvironmentPlugin을 추가하였다.
'development'는 기본값이고, scripts에서 어떻게 바꾸느냐에 따라 달라진다.

package.json

"scripts": {
    "dev": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=build webpack --mode production",
    "start": "NODE_ENV=start node ./server/server.cjs"
  },

NODE_ENV라는 변수를 추가한다.

다음 문서를 참조할 수 있다.

아직 해결하지 못한 것

webpack-cli 코드에서는 WEBPACK-SERVE라는 환경변수를 갖고 있고, devserver라면, 이 변수가 true로 되어있다.

하지만 이 변수를 사용할 수 있는 방법을 현재 찾지 못하였는데, 이 방법을 찾을 수 있다면 상기에 제시한 EnvironmentPlugin을 사용하지 않아도 될 것이다.