Webpack

Gisele·2021년 2월 25일
0

1. 등장배경

모듈

모듈이 없던 시절

//hello.js
function helloWorld(a){
	return 'hello world'+a+'!' 
}
// app.js
console.log(helloWorld('yoooonk'));  // hello world yooooonk!
...
<body>
  <script src="src/hello.js"></script>
  <script src="src/app.js"></script>
</body>

모듈이 없던 때에는 하나의 html 파일에서 위의 방법으로 로딩을 해서 실행을 했다.
이렇게 하면 함수들이 전역 scope 에서 작동하게 된다.

IIFE 방식의 모듈

함수 스코프를 만들어 사용.

var hello = hello||{};
(function(){
	function helloWorld(a){
	return 'hello world'+a+'!' 
    }
  
  hello.helloWorld = helloWorld;
})

CommonJS

exports 키워드로 모듈을 만들고 require() 함수로 호출해서 사용할 수 있다. Nodejs에서 사용하는 방식

// hello.js
exports function helloWorld(a){return 'hello world'+a+'!' }
// app.js
const helloWorld = require('./hello.js');

helloWorld('yooooonk');

ES2015에서 등장한 표준 모듈 시스템

표준 모듈 시스템의 등장으로 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적이다.
export 키워드로 모듈을 만들고, import 키워드로 가져와 사용한다.

//hello.js
export function helloWorld(a){return 'hello world'+a+'!' }
// app.js
import * as hello from './hello.js';
//import {helloWorld} 
hello.helloWorld(a);


📑 reference

profile
한약은 거들뿐

0개의 댓글