Webpack

Intro

위와 같은 미션이 포함되어 있는 과제를 하며 정말 많은 어려움을 겪고 있다.😭 그동안 ES6모듈화에 대해 공부를 해야지,,하면서 미루고, 작은 프로젝트에서 한 파일정도 가지고 와 연결하는 정도로만 진행을 해보았더니 막상 따로따로 필요 요소들을 어떻게 한 프로젝트를 어떻게 모듈화를 해야할지 감을 잡지 못하고 있다.😂😂

그러던 중 ES6로 모듈화를 하는건 복잡할 수 있기에 일단 webpack을 사용해보라는 조언을 얻어 webpack에 대해 공부를 해보았다.

webpack 환경만들기

1. 패키지 설치

//패키지.json파일 생성
$ npm nint -y 

// 필요한 패키지 설치 (webpack-cli와 webpack-dev-serve의 버전 일치를 위해 @next를 작성)
$ npm i -D webpack webpack-cli webpack-dev-server@next

2. package.json

  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },

• webpack-cli : 커멘드라인 인터페이스(CLI)를 지원해주는 패키지, 이를 통해 script부분에 webpack명령을 사용할 수가 있게 되는 것입니다.
  ( ※ 번들러는 자동화되어 있었다면, webpack은 직접 설정해줘야 합니다.)

• webpack-dev-server : dev명령을 통해 웹페이지를 오픈할 때, 변경되는 내용들을 바로바로 반영할 수 있도록 도와주는 패키지.

3. webpack.config.js 생성

webpack을 통해 개발 서버를 오픈하기 위해 구성 파일을 생성해야 하며, 루트 경로에 webpack.config.js 파일을 생성해 필요한 구성옵션을 정리를 해줘야합니다.

이러한 상세한 구성 옵션을 통해 훨씬 더 프로젝트를 세세하게 다룰 수 있기 때문에 작은 프로젝트 보다는 조금 더 규모있는 프로젝트에 유용합니다.

4. webpack.config.js 작성

브라우저에서는 import, export와 같이 데이터 가져오기와 내보내기가 사용됩니다. 그러나 webpack.config.js 파일은 브라우저가 아닌 node.js 환경에서 동작을 하며 import, export와는 다른 명령어가 사용됩니다.

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js', //상대경로로 명시
  
   // 결과물(번들)을 반환하는 설정
  output: ''
}

4-1 module.exports의 구성옵션

1. entry

• webpack 번들러가 동작할 때 어디에서부터 어디에서부터 읽어들이기 시작하면 되는지에 대한 파일을 지정하는 키워드
• 하나의 진입점이 아닌 여러 진입점을 설정해줄 수도 있습니다.

2. output

• entry를 통해 읽어들인 파일에 기본적인 연결 관계를 webpack이 분석하여 결과를 내어주는 기본적인 구성을 작성할 수 있습니다.
• 객체 데이터를 통해 내용을 추가할 수 있으며, 대표적인 옵션인 path와 filename가 있습니다.
  • path
    : webpack을 동작시킬 때 어떠한 경로에 결과물을 만들어서 내어줄건지 명시.
    : node.js에서 필요로 하는 절대 경로를 명시
  • filename
    : path에 명시된 경로에 filename에 명시된 파일 이름으로 entry에서 명시된 진입점으로 사용된 폴더에 연결된 모든 내용을 번들로 만들어 합쳐서 내어주게 됩니다.
    : filename은 entry에서 읽어들인 파일명과 동일하게 지정해줄 수 있습니다.

※node.js에서 필요로하는 절대 경로 명시하는 방법
node.js에서 필요로 하는 절대 경로를 명시하기 위해 require 함수를 통해 node.js에서 기본으로 제공하는 전역모듈인 path라는 모듈을 가져와 사용할 수 있습니다.
(전역모듈이기 때문에 별도 설치를 할 필요 없이 아래와 같이 작성을 통해 바로 가져와 사용할 수 있습니다. )

path 사용예시

const path = require('path') //path모듈을 가지고 와 변수에 할당.
 module.exports = {
  entry: './js/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'), 
    filename: 'main.js'
  }
}

• __dirname : node.js사용할 수 있는 전역변수로 현재 파일이 있는 그 경로를 지칭합니다.
• resolve 메소드는 첫번째 인수와 두번째 인수를 합쳐주는 역할을 합니다. 결국 실제 경로와 dist라는 폴더의 이름을 합쳐서, 절대적인 경로를 output의 path속성에 제공을 하는 것입니다.

5. 결과확인

webpack.config.js의 작성이 끝난 후 npm run build명령어를 실행시켜보면, dist라는 폴더가 만들어지며 폴더 내부에 main.js라는 이름으로 파일이 생성된 것을 확인할 수 있습니다.

5-1 output의 claen옵션

webpack.config.js의 filename을 수정한 후 npm run build를 통해 실행시켜보면, 그 전에 실행시켜 만들어진 파일이 그대로 남아있는 것을 확인할 수 있습니다. 이경우 output의 속성에 clean이라는 구성옵션을 true로 설정을 함으로써 해결할 수 있습니다.

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true,
  }

5-2 path, filename 명시하지 않는 경우?

output의 path, filename을 주석처리한 후 npm run build를 통해 실행시켜보면, 기존과 동일하게 dist라는 폴더가 생성되고 그 내부에 main.js라는 이름을 가진 파일이 생성된 것을 확인할 수 있습니다.

이는 webpack 번들러는 기본적으로 결과물을 dist 폴더에 entry에 입력한 동일한 파일명으로 만들어주기 때문입니다.

추가적인 옵션들은 webpack홈페이지에서 확인할 수 있습니다.