Sungmin Jung님의 게시글

질문&답변

DefinePlugin 에서

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 = ` ${ 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' , 이런식으로 사용될 수 있을것 같습니다.