webpack 실행시 webpack.config.js 로 파라미터 전달

CLI에서 webpack을 실행할 때 커스텀 파라미터를 넘기려면 --env 플래그를 사용할 수 있습니다. 이렇게 하면 webpack 설정 파일에서 해당 값을 받아 사용할 수 있습니다.

 

예를 들어, 다음과 같이 CLI에서 webpack을 실행하면 --env 플래그를 통해 mode라는 파라미터를 설정 파일에 전달할 수 있습니다.

webpack --env mode=production

 

그런 다음, webpack 설정 파일에서 이 값을 받을 수 있습니다. webpack.config.js 파일이 함수를 export하면 webpack은 이 함수를 호출하고, --env 플래그를 통해 전달된 파라미터를 인수로 제공합니다.

// webpack.config.js

module.exports = (env) => {
  console.log(env.mode); // "production"

  return {
    // 웹팩 설정
  };
};

 

이렇게 하면 CLI에서 웹팩을 실행하면서 넘긴 mode 값이 webpack.config.js에서 출력됩니다.

이 기능은 여러 가지 환경에 대해 서로 다른 webpack 설정을 사용해야 하는 경우 유용합니다. 예를 들어, 개발 환경에서는 소스 맵을 사용하고, 프로덕션 환경에서는 코드를 최적화하고 난독화할 수 있습니다. 이를 위해 env 값을 확인하고 해당 설정을 반환하도록 webpack.config.js를 작성할 수 있습니다.

 

여러 개의 파라미터를 전달하는 경우에도 --env 플래그를 사용할 수 있습니다. 각 파라미터는 --env 플래그를 통해 개별적으로 전달할 수 있습니다. 예를 들어, mode와 debug 두 가지 파라미터를 전달하려면 다음과 같이 CLI에서 webpack을 실행할 수 있습니다.

webpack --env mode=production --env debug=true

 

그런 다음, webpack.config.js에서는 이러한 값을 받을 수 있습니다.

// webpack.config.js

module.exports = (env) => {
  console.log(env.mode); // "production"
  console.log(env.debug); // "true"

  return {
    // 웹팩 설정
  };
};

 

위의 예제에서는 문자열 값을 전달했습니다. 필요한 경우 숫자, 불리언, 그리고 특별한 경우에는 JSON 문자열도 전달할 수 있습니다. JSON 문자열은 webpack.config.js에서 객체로 파싱할 수 있습니다.

다만, 이 경우 JSON 문자열은 쌍따옴표로 감싸야하며, 쌍따옴표 내부에 있는 쌍따옴표는 이스케이프(\")해야 합니다.

webpack --env data="{\"key1\":\"value1\", \"key2\":\"value2\"}"

 

webpack.config.js에서는 다음과 같이 이 값을 받고 파싱할 수 있습니다.

// webpack.config.js

module.exports = (env) => {
  const data = JSON.parse(env.data);
  console.log(data.key1); // "value1"
  console.log(data.key2); // "value2"

  return {
    // 웹팩 설정
  };
};

 

webpack5 에서와 webpack4 에서의 차이

• webpack5
  webpack --env entry='./app.js' --env output='bundle.js'
• webpack4
  webpack --env.entry='./app.js' --env.output='bundle.js'

참고

• https://stackoverflow.com/a/59050716