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