DefinePlugin 에서

Question

TWO가 전역변수로 접근된다고 하셨는데 window.TWO를 콘솔찍어보면 undefined 입니다. TWO 변수는 어디에 있는건가요...

Sungmin Jung · Answer

TWO가 전역변수로 접근된다는 의미는 어플리케이션단에서의 의미입니다.  플러그인은 번들링된 이후에 적용되기 때문에, DefinePlugin은 번들된 js에서 TWO를 찾아 값을 변경합니다. new   webpack . DefinePlugin ({              ONE : 'alert("POP! ONE")' ,              TWO : JSON . stringify ( '1+1' ),              'api.domain' : JSON . stringify ( 'http://dev.com' )        }) 위와 같이 설정했을때 아래의 코드를 빌드하고 실행해보면, import   './app.css' ; import   nyancat   from   './nyancat.jpg' ; document . addEventListener ( 'DOMContentLoaded' ,() => {      document . body . innerHTML = `     <img src=" ${ nyancat } "/>     ` ;      } ) ONE console . log ( TWO ); console . log ( api . domain ); 순서대로 alert창에 "POP! ONE"이 출력되고, 콘솔에는 1+1 과 http://dev.com가 출력됨을 확인하실 수 있습니다. 번들된 파일에 ONE, TWO, api.domain의 정보를 선언한 Define값으로 변경하고 변경된것은 브라우저의 자바스크립트로 실행됩니다. 만약 Define에 ONE에 대한 명시가 없다면 브라우저는 ONE이 정의되지 않았다는 에러를 콘솔에서 확인할 수 있습니다. window,TWO에 변수를 넣고 싶으시다면  TWO : 'window.TWO=2' , 이런식으로 사용될 수 있을것 같습니다.

김정환 · Answer

저도 문서만 보고 전역변수라고 생각했고 그래서 브라우저 환경에서 전역객체 winow로 접근할수 있다고 생각했었어요.  > The DefinePlugin allows you to create global constants which can be configured at compile time. Sungmin Jung님 말씀대로 어플리케이션 관점에서 전역이라고 생각하는 것이 맞겠네요.