[Webpack] 웹팩 설치부터 설정 파일 작성 후 번들링 까지 실습해보기!

웹팩 실습해보기!

💡 웹팩은 한 마디로 모듈 번들러!! 모듈 사이의 의존성을 파악해 하나로 묶어주는 역할을 담당하며, 모듈 지원이 불가한 브라우저에서의 의존성 관리 문제 해결과 개발 생산성을 향상 시켜주는 역할을 해준다.

웹팩 설치

npm install -D webpack webpack-cli

• -D 옵션을 붙여서 devDependencies에 해당 패키지들이 속하도록 해준다.

번들링 실행 명령어

"scripts": {
	"webpack": "webpack",
}

• 위에서 webpack-cli를 설치함으로써 우리는 cli 명령어를 사용할 수 있으므로, package.json 파일 내 script 속성을 이용해 커스텀 명령어를 적어주었다.

npm run webpack

// 모드를 설정해 실행하는 방법
npx webpack --mode=production

• npm을 이용해 커스텀 명령어를 실행해주면, 번들링을 실행하게된다.

웹팩 설정 파일

• 단순히 위처럼 설정 파일 없이 기본 설정을 가지고 바로 번들링을 수행할 수도 있지만, 많은 사람들이 웹팩의 다양한 기능들을 사용하기 위해 설정 파일을 추가적으로 작성한다.

번들링 시 사용할 설정 파일 설정

webpack --config nawon.config.js

• 자신이 만든 설정 파일이 nawon.config.js라면, 위와 같이 꼭 해당 파일을 번들링 시 고려해야한다는 명령어를 입력해주어야한다.

• 기본적으로 webpack.config.js 파일은 위와 같은 작업이 필요없이 설정 파일로 인식하는 것 같다. (이 때문에 많은 사람들이 그냥 webpack.config.js 파일로 이름을 짓나보다.)

설정 파일 작성

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/javascript/index.js",
  output: {
    path: path.resolve(process.cwd(), "dist"),
    filename: "[name].[contenthash].js",
  },
};

• 간단하게 일단 2가지 속성만 적용한 설정 파일이다.

• entry는 진입점을 나타낸다. 모듈 간 의존성의 시작점이라고 이해하면 된다.

• output은 최종 번들링 결과가 저장될 경로와 파일명 등을 설정하는 속성이다.

• path.resolve() 는 인자로 넘어온 경로들을 합쳐주는 역할이고, pwd.cwd()는 현재 프로세스가 실행되고 있는 경로를 나타낸다. 즉, 현재 경로/dist 경로에 번들링이 후 파일을 저장하겠다는 의미인 것이다.

• 파일명은 해시값을 이용해서 설정했다.

설정 파일 적용 후 번들링 수행 결과

• 설정 파일 작업 해준대로 프로젝트 내 dist 폴더가 생성되면서 번들링이 완료된 파일이 있는 것을 볼 수 있다.

• 해당 파일을 자세히 들여다 보면, 내가 모듈화해서 사용했던 코드들이 전부 하나로 잘 합쳐져 있는 것을 볼 수 있다.

참고 ) dist 폴더는 베포 시에 사용되기 때문에 git으로 관리할 필요 없다! gitignore에 추가해주자!

다음 게시물에서는 웹팩 Loader 설정에 대해 알아보쟈!!