[2019.04.21]WebPack 사용법 #2 - webpack.config.js 설정

이전 사용법 #1에서는 webpack 명령어를 이용하여 직접 번들파일을 생성해주는 방식을 작업해 보았다.

그러나 웹 서비스를 개발할 때마다 일일히 webpack 명령어를 쳐서 번들화 작업을 해 줄 수 없다.

그래서 webpack.config.js라는 파일을 이용해서 개발작업을 할 때마다 자동으로 번들화 시켜주도록 설정한다.

 

bundle 파일을 자동으로 생성해주는 작업을 위한 설정 - webpack.config.js

webpack을 자동으로 사용하기 위한 설정을 하기 위해서는 'webpack.config.js' 이라는 파일을 하나 생성해 줘야한다. 이 파일에 webpack에 관한 정보가 들어가게 된다.

 

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'app.js'), // 번들 작업할 파일
  output: {
    path: path.resolve(__dirname, 'dist'), // 번들화 된 파일 경로
    filename: 'bundle.js' // 파일 명
  },
  watch: true // 자동 번들화 작업 여부
}

// webpack.config.js 파일

 

원래는 webpack.config.js 파일에 더 많은 정보가 들어갈 수 있지만, 지금 당장은 이정도가 제일 기초이다.

우선 첫줄, Node.js에서 path에 대한 경로 값을 가져와서 저장을 한다. (webpack은 Node.js의 환경 위에서 움직인다.)바로 다음 줄에 object 방식의 데이터를 exports하고 있다. 내부를 보자.

이 내부가 webpack이 일하게 될 내용이다. 

• entry : budling할 파일의 정보 (상세 내용은 바로 아래 entry제목에 제시)
• output : bundle후에 나올 파일의 정보 (path는 파일경로, filename은 bundling한 파일 명)

bundle과정은, entry에 선언한 첫 진입 파일과 import 혹은 require로 연결한 하위 파일들의 관계를 dependency graph로 만들어 이것을 기준으로 bundling을 진행한다. 

 

entry

path.resolve(__dirname, 'app.js'); -> __dirname은 현재 경로, app.js는 bundling할 파일들에 대한 최상위 root파일(첫 진입 파일)

• 현재 경로  : ~/Documents/CodeStates/immersive_12/sprint_6/webpack_demo
• entry에 작성된 정보의 결과 : ~/Documents/CodeStates/immersive_12/sprint_6/webpack_demo/app.js
• output에 작성된 bundle 후의 정보 결과 : ~/Documents/CodeStates/immersive_12/sprint_6/webpack_demo/dist/bundle.js
  
  

그리고 webpack 명령어를 실행시켜본다.

 

webpack이 watch:true 로 인하여, 자동 활성화를 시키게 되었다.

이제 index.html은 dist 디렉토리의 bundle.js파일만 사용하고 있지만, app.js, module1.js 등 bundle 대상자인 파일을 수정해도 자동으로 bundle작업이 되어 bundle.js파일이 업데이트 된다.

 

 

현재 index.html 파일과 연결이 되어 있지 않은 app.js파일을 수정해본다.

 

 

그리고 index.html 브라우저에서 새로고침을 하면, 참조하고 있던 bundle.js파일이 자동으로 bundling 된 것을 확인할 수 있다.