webpack 두렵지 않아요 - webpack.config.js 기본

webpack을 실행하여, 서로 다른 javascript를 main.js로 번들링해봤다.
별도의 설정을 하지 않아도 default option이 있기 때문에 동작했다.

webpack.config.js를 통해 webpack 명령어 동작을 알아보고
webpack.config.js에는 어떤 설정들이 있는지 알아보자.

webpack.config.js 작성

프로젝트의 루트 경로에서 webpack.config.js 파일을 생성하자.

cd webpack-tutorial
touch webpack.config.js

그리고 아래와 같이 작성한다.

• webpack 명령어가 동작하면, webpack.conifg.js를 찾아 옵션을 적용한다.
• index.js는 /src/index.js 로 파일을 옮긴다.

const path = require('path');

module.exoprts = {
	mode: 'development',
	entry: './src/index.js',
	output: {
        filename: 'main.js',
        path: path.resolve(__dirname, dist)
    }
}

이 파일의 가장 기본은 아래 3가지 요소이다.

• mode none | development | production 으로 나누어진다.
  - production 모드에서는, code를 minify하여 용량도 최적화 한다.
  
• entry javascript의 root파일을 설정해준다.
  - root 파일이란, html에서 가장 먼저 불리는 javascript라고 보면 된다.
  
• output bundling한 결과물을 어디에, 어떻게 출력할 것인지 정한다.

npm run build!!

npm run build

이전 글에서 작성한 scripts를 다시 실행해보면 main.js가 생기는 것을 볼 수 있다.
output의 filename을 변경해보면서 정상적으로 동작하는지 확인해보자.