[컴][javascript] webpack 을 이용해서 compile 시 process.env 사용

webpack 을 이용해서 compile 시 process.env 사용

webpack 을 이용해서 compile 시 React 에서 process.env 등의 값을 이용할 수 있다.

DefinePlugin

webpack.config. 에서 아래처럼 DefinePlugin 을 통해서 React code 에 process.env 를 넣어준다.
그리고 이로인해 만약 if(false) 같은 code 가 생기면, 이것은 unglify 같은 것들을 통해서 배포시 제외시킬 수 있다.

// webpack.config.js

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return { raw, stringified };
}


const env = getClientEnvironment(publicUrl);

...
module.exports = {
  ...
  plugins: [
    ...
    // Makes some environment variables available to the JS code, for example:
    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
    new webpack.DefinePlugin(env.stringified),
    ..
  ],
}

References

1. DefinePlugin fails to inject process.env.NODE_ENV into React without UglifyJSPlugin · Issue #868 · webpack/webpack · GitHub