webpack은 babel보다 많은일을 한다. babel을 실행하는 것 이외에도 다양한 기능이 있다. Webpack은 다양한 폴더에 흩어져있는 자바스크립트 파일들을 묶어서 하나의 자바스크립트 파일로 public directory에 저장한다.

Set up webpack

프로젝트 디렉토리로 가서 cmd에 webpack을 local에 설치하자.

  $ npm install webpack@latestversion webpack-cli@latestversion

package.json파일을 보면 dependencies에 webpack과 webpack-cli가 설치된것을 볼 수 있을것이다. 프로젝트의 상위에 webpack.config.js 이름의 파일 만들자. 파일 안에는 configuration detail을 적으면 된다. 어디에서 파일을 가져와서 어디에 어떤 이름으로 저장할지 등에 관한 내용이다. 아래 예시를 보자.

const path = require('path')

module.exports = {
    entry: './src/index.js'
    ooutput: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: 'bundle.js'
    }
}

__dirname이라는 nodejs에서 제공하는 라이브러리를 사용해서 절대 경로를 우리 프로젝트에 제공해 줄 것이다.

npm run webpack

package.json 파일의 scripts 옵션에 "webpack": "webpack"을 추가하고 웹팩을 실행해보자.

  $ npm run webpack

명령어를 실행하면 우리가 지정한 경로에 새로운 자바스크립트 파일이 생긴것을 볼 수 있을 것이다. 파일을 클릭해보면 오~ 사람으로써는 도저히 알아볼 수 없는 글자들이 난무한데 사실 이것은 index.js를 컴퓨터가 빨리 읽어 올 수 있도록 압축한것이다.

Javascript module: Import & Export

webpack 에서 제공하는것중 하나는 javascript module이다. 이전에는 자바스크립트 태그를 하나의 html 파일에 여러개를 순서대로 지정해서 넣어야했다 (원하는 function을 꺼내쓰기 위해서는). 이제는 bundle.js에 모든게 다 포함되어 있을것이기 때문에 하나의 스크립트 태그로 해결할 수 있다.

어떻게 그렇게 할 수 있죠? 가령 우리가 src 디렉토리 안에 두개의 자바스크립트 파일을 가지고 있다고 해보자. 하나는 index.js 파일이고 다른 하나는 utilities.js 파일이라고 하면 index.js 파일 안에 다른 자바스크립트 파일을 import하면 된다.

import './utilities'

만약 utiliteis.js에서 어떤 함수 꺼내쓰고 싶다면 파일에 들어가서 export 해줘야한다.

console.log('utilites.js')
export const add = (a, b) => a + b

그러면 이제 어떤 함수를 import할것인지 index.js 파일에서 특정해줘야한다.

import { add } from './utilities'

JavaScript Module: Export style

export style에는 두가지 방법이 있다. 하나는 Named export 다른 하나는 Default export이다.

Named export

export const add = (a, b) => a + b
export const name = 'Suzie'

Default export

const square = (x) => x * x
export default square

그러면 어떻게 default export를 import하느냐 named export처럼 이름으로 가져오는것이 아니라 default를 가져오는것이기 때문에 이름은 무엇이 되었든 상관 없다. 위 코드에서 sqaure을 export했지만 import할때 부르는 이름으로는 뭘 해도 상관없다. 나는 스폰지밥 스퀘어팬츠로..

import squarepants, { add, name } from './utilities'

한방에 export 하기

Named export 그리고 Default export 두가지를 한방에 export 하고 싶다면 아래 예제를 참고하자.

const add = (a, b) => a + b
const name = 'Suzie'
const square = (x) => x * x

export { add, name, square as default }