바닐라 자바스크립 Webpack

웹팩 핸드북

웹 팩이란?

• 모듈 번들러(module bundler)

모듈이란 ?
프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위.
성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하는 것

모듈 번들러란?
Html, css, javascript, image, video 등을 각각의 모듈로 보고 조합해서 병합된 하나의 결과물로 만드는 도구

웹팩이 필요한 까닭

• 사용하지 않는 고드의 관리
  자바스스크립트 변수 유효 범위

속성

entry

: 웹 자원을 변경하기 위한 진입점이자, 자바스크립트 파일 경로

// webpack.config.js
module.exports = {
  entry: './src/index.js'
}

src 파일 밑 index.js을 대상으로 웹팩이 빌드를 수행

싱글페이지 어플리케이션을 구현하는 경우

// index.js
import LoginView from './LoginView.js';
import HomeView from './HomeView.js';
import PostView from './PostView.js';

function initApp() {
  LoginView.init();
  HomeView.init();
  PostView.init();
}

initApp();

사용자의 로그인 화면, 로그인 후 진입하는 메인화면, 게시물을 작성하는 화면 등 웹 서비스에 필요한 화면들이 모두 index.js 파일에서 불려져 사용하기 때문에 웹팩을 실행하면 해당 파일들의 내용까지 해석해서 파일을 빌드해준다.

멀티페이지 어플리케이션을 구현하는 경우

entry: {
  login: './src/LoginView.js',
  main: './src/MainView.js'
}

entry의 포인트가 1개가 될 수도 있지만 여러개가 될 수 있다. 엔트리 포인트를 분리하는 경우는 싱글 페이지가 아닌, 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 멀티 어플리케이션에서 적합

output

// webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

웹팩을 돌리고 난 결과물의 파일 경로를 의미한다.
객체 형태로 옵션들을 추가해야 한다.

Output option 형태

// webpack.config.js
var path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

최소한의 filename은 지정해주어야 하며, 일반적으로 path 속성을 함께 정의한다.

• filename : 웹팩으로 빌드한 파일의 이름
• path : 해당 파일의 경로

로더 Loader

로더는 웹팩이 어플리케이션이 아닌 웹 자원(html,css )등을 변환할 수 있도록 도와주는 속성이다.

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}