• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

DefinePlugin 에서

20.06.07 15:17 작성 조회수 161

0

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

TWO 변수는 어디에 있는건가요...

course-thumbnail

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

자주 사용하는 플러그인

강의실 바로가기

답변 2

·

답변을 작성해보세요.

2

Sungmin Jung님의 프로필

Sungmin Jung

2020.06.07

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

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

0

김정환님의 프로필

김정환

지식공유자

2020.06.09

저도 문서만 보고 전역변수라고 생각했고 그래서 브라우저 환경에서 전역객체 winow로 접근할수 있다고 생각했었어요. 

> The DefinePlugin allows you to create global constants which can be configured at compile time.

Sungmin Jung님 말씀대로 어플리케이션 관점에서 전역이라고 생각하는 것이 맞겠네요. 

이 글과 비슷한 Q&A