Webpack의 기본구조 (Module의 정의)

Module

• 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어 있는 형태

Module의 표준

Module을 사용하기 위해서는 Module을 인식하는 Module System과 Module을 다루는 키워드가 제공되어야 한다.

• CommonJS(Node.js)
• ESM(ECMAScript 2015 ~ )

Module을 다루는 키워드

Module을 다루는 키워드는 크게 2가지가 있다

1. 내보내기(CommonJS)
   • 한 번에 내보내기(내보낼값들을 객체안에 넣고 한번에 내보냄)
   • 개별적으로 내보내기(내보낼 값들을 개별적으로 키워드를 지정해서 지정된 값들만 내보냄)

   • const PI = 3.14; // PI값 
     const getCirckeArea = r => r * r * PI; //원의 넓이를 구하는 공식 
     
     module.exports = { 
         PI, 
         getCirckeArea 
     } // 한번에 내보내기
     
     exports.PI = PI; 
     exports.getCirckeArea = getCirckeArea; // 개별적으로 내보내기
     

2. 가져오기(CommonJS)

   • //확장자(.js) 생략가능
     const mathUtil = require('./module.js'); //파일 불러오기
     
     const { getCircleArea } = require('./module.js'); //함수만 불러오기

3. 내보내기(ESM)

   • export {
         PI,
         getCircleArea
     }
     
     export default {
         PI,
         getCircleArea
     } // 불러오기할때 객체 이름을 지정해서 불러와야한다

4. 가져오기(ESM)

   • import { getCircleArea } from './module.js'; // export {} 로 불러왔을 때
     const result = getCircleArea();
     
     import module from './module.js'; //export default 로 불러왔을때 객체 이름을 지정해 줘야한다.
     const result = module.getCircleArea();

 

주의할 점

• 내보내는 기능을 한 가지로만 표시하는 게 좋다  두 가지 방법을 혼용해서 사용하면 내보내는 기능들 중 일부가 유실될 수 있다