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=`
    <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',

이런식으로 사용될 수 있을것 같습니다.

인프런 커뮤니티 질문&답변