2. 웹팩이전의 세계와 모듈의 개념

MINBOK·2022년 4월 2일

Webpack

목록 보기
1/9
post-thumbnail

index.js

<html>
<head>
    <script src="./source/hello.js"></script>
    <script src="./source/world.js"></script>
</head>
<body>
    <h1>Hello, Webpack</h1>
    <div id="root"></div>
    <script>
        document.querySelector('#root').innerHTML = word;
    </script>
</body>
</html>

hello.js

var word = 'Hello';

world.js

var word = 'World';

결과

모듈 개념 이해하기

index.js

<html>
<head>
</head>
<body>
    <h1>Hello, Webpack</h1>
    <div id="root"></div>
    <script type="module">
        import hello_word from "./source/hello.js";
        import world_word from "./source/world.js";
        document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;
    </script>
</body>
</html>

hello.js

var word = 'Hello';

export default word;

world.js

var word = 'World';

export default word;

결과

참고 유튜브 생활코딩
https://www.youtube.com/watch?v=cp_MeXO2fLg&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA

0개의 댓글