WebPack 이란2 import, export (예제)

ES6 Modules 문법

모듈화 기능의 기몬 문법 import, export

export

내보낼 변수와 함수를 선언

export 변수, 함수

import

export된 사용하고자하는 변수 혹은 함수들을 정의

import { 불러올 변수 또는 함수 이름 } from '파일경로'

기본예제1

//math.js
export var pi = 3.14;

// app.js
import { pi } from './math.js'
console.log(pi); //3.14

기본예제2

//math.js
export var pi = 3.14;
export function sum(a, b){
  return a + b;
}

// app.js
import { sum } from './math.js';

sum(10, 20); // 30

실습예제

math.js

외부 접근 가능하도록 export 선언

export function sum(a, b) {
  return a + b;
}

app.js

math.js의 sum 함수를 접근할 수 있도록 import 선언

import { sum } from './math';
console.log('10 + 20 = ', sum(10, 20));

webpack.config.js

webpack을 사용하여 math.js를 main.bundle.js로 모듈 번들링함

var path = require('path');

module.exports = {
    mode: 'production',
    entry: './js/app.js',
    output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'main.bundle.js'
    },
    ... 생략 ...

Result

• main.bundle.js로 모듈번들링을 하였지만
• console 창에서는 모듈 번들링 하기 전 파일인 app.js에 접근이 가능

참고

• 인프런 강의 주소 
  https://github.com/joshua1988/LearnWebpack
• 수업 교안 사이트 
  https://joshua1988.github.io/webpack-guide/guide.html